构建框架
This commit is contained in:
龙运模
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="24">
|
||||
<el-card shadow="never" class="aboutTop">
|
||||
<div class="aboutTop-info">
|
||||
<img src="img/logo.png">
|
||||
<h2>{{data.name}}</h2>
|
||||
<p>{{data.version}}</p>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="dependencies">
|
||||
<el-descriptions border :column="3">
|
||||
<el-descriptions-item v-for="(value, key) in data.dependencies" :key="key" :label="key">{{value}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="devDependencies">
|
||||
<el-descriptions border :column="3">
|
||||
<el-descriptions-item v-for="(value, key) in data.devDependencies" :key="key" :label="key">{{value}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import packageJson from '../../../package.json'
|
||||
|
||||
export default {
|
||||
name: 'about',
|
||||
data() {
|
||||
return {
|
||||
data: packageJson
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aboutTop {border:0;background: linear-gradient(to right, #8E54E9, #4776E6);color: #fff;}
|
||||
.aboutTop-info {text-align: center}
|
||||
.aboutTop-info img {width: 100px;}
|
||||
.aboutTop-info h2 {font-size: 26px;margin-top: 15px;}
|
||||
.aboutTop-info p {font-size: 16px;margin-top: 10px;}
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never" header="v-auth 高精度权限控制">
|
||||
<el-button v-auth="'user.add'" type="primary">v-auth="'user.add'"</el-button>
|
||||
<el-button v-auths="['user.no','user.add']" type="primary">v-auths="['user.no','user.add']"</el-button>
|
||||
<el-button v-auths-all="['list.add','user.add']" type="primary">v-auths-all="['list.add','user.add']"</el-button>
|
||||
|
||||
<el-alert title="v-auth指令 是$AUTH的语法糖, 原先需要使用v-if来判断是否有权限, 判断单项权限，如果满足就判断有权限" style="margin-top: 20px;"></el-alert>
|
||||
<el-alert title="v-auths指令 传入数组,有一项满足就判断有权限" style="margin-top: 20px;"></el-alert>
|
||||
<el-alert title="v-auths-all指令 传入数组,必须全满足才有权限，比如user.no没有这个权限，加到这里的话就表示不全部满足" style="margin-top: 20px;"></el-alert>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="v-role 角色权限控制" style="margin-top: 15px;">
|
||||
<el-button v-role="'admin'" type="primary">v-role="'admin'"</el-button>
|
||||
<el-button v-role="['SA','admin']" type="primary">v-role="['SA','admin']"</el-button>
|
||||
<el-alert title="v-role指令 是$ROLE的语法糖, 原理是判断是否含有用户所在的角色别名" style="margin-top: 20px;"></el-alert>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="v-time 时间转换" style="margin-top: 15px;">
|
||||
<p>
|
||||
<el-tag v-time="1630117968295" format="yyyy-MM-dd hh:mm:ss"></el-tag>
|
||||
</p>
|
||||
<p style="margin-top: 15px;">
|
||||
<el-tag v-time.tip="time1"></el-tag>
|
||||
</p>
|
||||
<p style="margin-top: 15px;">
|
||||
<el-tag v-time.tip="time2"></el-tag>
|
||||
</p>
|
||||
<p style="margin-top: 15px;">
|
||||
<el-tag v-time.tip="time3"></el-tag>
|
||||
</p>
|
||||
<el-alert title="指令方式日期时间转换,如设置'tip'修饰符将会转换成相对时间,并且每60秒自动更新" style="margin-top: 20px;"></el-alert>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="v-copy 一键复制" style="margin-top: 15px;">
|
||||
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="copyText"></el-input>
|
||||
<el-button v-copy="copyText" type="primary" style="margin-top: 15px;">复制</el-button>
|
||||
<el-alert title="点击复制按钮会将文本框绑定的值复制到剪切板, 试着粘贴到其他地方看看效果" style="margin-top: 20px;"></el-alert>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'directive',
|
||||
data() {
|
||||
return {
|
||||
time1: new Date(),
|
||||
time2: new Date().setMinutes(new Date().getMinutes()-1),
|
||||
time3: new Date().setMinutes(new Date().getMinutes()-120),
|
||||
copyText: '测试复制内容'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-page-header content="FullPage" @back="goBack" />
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-empty description="FullPageMain"></el-empty>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'fullpage',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
goBack(){
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-aside style="padding:15px;width: 400px;">
|
||||
<el-card shadow="never" header="异步加载JS">
|
||||
<div style="line-height: 1.5;font-size: 13px;">
|
||||
<p>演示了使用 @/utils/load 加载百度地图的JSAPI和它的GL库BMapGLLib</p>
|
||||
<p>当然也可以像传统网页一样加载任何JS和CSS，甚至可以是JQ。</p>
|
||||
<br/>
|
||||
<el-alert title="这是一项试验工具, 具有不稳定性" type="warning" show-icon :closable="false"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-aside>
|
||||
<el-main class="nopadding">
|
||||
<div style="width: 100%;height: 100%;" id="container"></div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { loadJS } from '@/utils/load'
|
||||
|
||||
export default {
|
||||
name: 'loadJS',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init(){
|
||||
var ak = "vxSbZuydZ42ktZCvXvy5xCai28OEVqUq"
|
||||
//loadJS (src, keyName, callbackName)
|
||||
//src 必填，需要加载的URL路径
|
||||
//keyName 必填，有2个作用，作为唯一KEY防止N次插入DOM；作为JS返回对象的key名，类似百度地图的BMapGL，如果没有则返回null
|
||||
//callbackName 非必填，如果远程JS有callback，填写callback方法名称。
|
||||
//loadJS返回Promise，如果全局对象eslint发出警告 需要//eslint-disable-next-line，暂时关闭警告行
|
||||
// ╭───这两个字符串要一致───╮
|
||||
var BMapGL = await loadJS(`//api.map.baidu.com/api?type=webgl&v=1.0&ak=${ak}&callback=BMapGLinit`, "BMapGL", "BMapGLinit")
|
||||
//像BMapGLLib就没有callback，无需第3个参数
|
||||
//var BMapGLLib = await loadJS("//api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js", "BMapGLLib")
|
||||
|
||||
|
||||
var map = new BMapGL.Map('container')
|
||||
map.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 20);
|
||||
map.enableScrollWheelZoom()
|
||||
map.setTilt(55)
|
||||
map.setDisplayOptions({
|
||||
poiText: false,
|
||||
poiIcon: false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never" header="async-validator内置">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px" status-icon>
|
||||
<el-form-item label="必填" prop="required">
|
||||
<el-input v-model="form.required"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="长度" prop="length">
|
||||
<el-input v-model="form.length" placeholder="长度需为3位"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-input v-model="form.type" placeholder="类型可为string number boolean array date url email等"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="范围" prop="range">
|
||||
<el-input v-model="form.range" placeholder="请填写范围在3至5位"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="枚举" prop="enum">
|
||||
<el-input v-model="form.enum" placeholder="请填写admin，user，guest其一"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="自定义" prop="custom">
|
||||
<el-input v-model="form.custom" placeholder="请填写数字1"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="异步验证" prop="async">
|
||||
<el-input v-model="form.async" placeholder="请输入SCUI最新版本号,form开启status-icon后 可以查看右侧状态"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submit">验证所有字段</el-button>
|
||||
<el-button @click="resetForm('form')">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="自定义" style="margin-top: 15px;">
|
||||
<el-form ref="form2" :model="form2" :rules="rules2" label-width="100px" status-icon>
|
||||
<el-form-item label="手机号码" prop="phone">
|
||||
<el-input v-model="form2.phone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="车牌号码" prop="cars">
|
||||
<el-input v-model="form2.cars"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submit2">验证所有字段</el-button>
|
||||
<el-button @click="resetForm('form2')">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-alert title="自定义验证可在 @/utils/verificate.js 中不断扩展业务需要的验证. 记得要 import 进来" type="success" />
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { verifyPhone, verifyCars } from '@/utils/verificate'
|
||||
|
||||
export default {
|
||||
name: 'verificate',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
|
||||
},
|
||||
rules: {
|
||||
required: [
|
||||
{ required: true, message: '请填写' }
|
||||
],
|
||||
length: [
|
||||
{ required: true, len: 3, message: '长度需为3位' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, type: 'email', message: '类型需为email' }
|
||||
],
|
||||
range: [
|
||||
{ required: true, min: 3, max: 5, message: '范围在3至5位' }
|
||||
],
|
||||
enum: [
|
||||
{ required: true, type: 'enum', enum: ['admin', 'user', 'guest'], message: '请填写admin，user，guest其一' }
|
||||
],
|
||||
custom: [
|
||||
{ required: true, validator: (rule, value)=>{return value === '1'}, message: '请填写数字1' , trigger:'blur'}
|
||||
],
|
||||
async: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback)=>{
|
||||
this.$API.demo.ver.get({value: value}).then(res => {
|
||||
if(res.data != value){
|
||||
return callback(new Error('请输入SCUI最新版本号：'+res.data))
|
||||
}
|
||||
callback()
|
||||
})
|
||||
},
|
||||
trigger:'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
form2: {
|
||||
|
||||
},
|
||||
rules2: {
|
||||
phone: [
|
||||
{ required: true, message: '请输入姓名' },
|
||||
{ validator: verifyPhone, trigger:'blur' }
|
||||
],
|
||||
cars: [
|
||||
{ required: true, validator: verifyCars, trigger:'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
submit(){
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (valid) {
|
||||
this.$message.success("全部验证通过")
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
submit2(){
|
||||
this.$refs.form2.validate(async (valid) => {
|
||||
if (valid) {
|
||||
this.$message.success("全部验证通过")
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm(ref){
|
||||
this.$refs[ref].resetFields()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never" header="打开">
|
||||
<el-button type="primary" plain @click="open1">打开个人信息</el-button>
|
||||
<el-button type="primary" plain @click="open2">打开后执行</el-button>
|
||||
<el-alert title="打开后执行原理: 路由push时,在当前路由对象中插入一个特殊标识, 在目标视图中beforeRouteEnter获取判断是否需要执行特殊方法" style="margin-top: 20px;"></el-alert>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="刷新" style="margin-top: 15px;">
|
||||
<el-button type="primary" plain @click="refresh1">刷新当前</el-button>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="关闭" style="margin-top: 15px;">
|
||||
<el-button type="primary" plain @click="close1">关闭当前</el-button>
|
||||
<el-button type="primary" plain @click="close2">关闭其他</el-button>
|
||||
<el-button type="primary" plain @click="close3">关闭后执行</el-button>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="设置" style="margin-top: 15px;">
|
||||
<el-form :inline="true">
|
||||
<el-form-item>
|
||||
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain @click="set1">设置标题</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="整页路由" style="margin-top: 15px;">
|
||||
<el-button type="primary" plain @click="fullpage">fullpage</el-button>
|
||||
<el-alert title="变更路由的层级关系,向上推至顶级达到在layout视图中显示. 只需要在路由中设置 meta.fullpage 即可" style="margin-top: 20px;"></el-alert>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import useTabs from '@/utils/useTabs'
|
||||
|
||||
export default {
|
||||
name: 'viewTags',
|
||||
data() {
|
||||
return {
|
||||
input: "newTabName"
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
open1(){
|
||||
this.$router.push('/usercenter')
|
||||
},
|
||||
open2(){
|
||||
this.$router.push('/usercenter')
|
||||
this.$route.is = true
|
||||
},
|
||||
refresh1(){
|
||||
useTabs.refresh()
|
||||
},
|
||||
close1(){
|
||||
useTabs.close()
|
||||
},
|
||||
close2(){
|
||||
useTabs.closeOther()
|
||||
},
|
||||
close3(){
|
||||
useTabs.closeNext((tags)=>{
|
||||
//回调返回所有标签的数组，这里其实是需要判断是否含有'/usercenter'，含有再操作的，这里为了演示就直接打开了。
|
||||
console.log(tags)
|
||||
this.$router.push('/usercenter')
|
||||
this.$route.is = true
|
||||
})
|
||||
},
|
||||
set1(){
|
||||
useTabs.setTitle(this.input)
|
||||
},
|
||||
fullpage(){
|
||||
this.$router.push('/other/fullpage')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user