1107
This commit is contained in:
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
弹窗功能演示
|
||||
</div>
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="带辅助性文字介绍"
|
||||
type="success"
|
||||
description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
|
||||
</el-alert>
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
pageTo(path){
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-alert{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
弹窗功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基本用法:
|
||||
</div>
|
||||
<el-button type="text" @click="dialogVisible1 = true">点击打开 Dialog</el-button>
|
||||
|
||||
<el-dialog title="提示" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
|
||||
<span>这是一段信息</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible1 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套表格:
|
||||
</div>
|
||||
<!-- Table -->
|
||||
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
|
||||
|
||||
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套表单:
|
||||
</div>
|
||||
<!-- Form -->
|
||||
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
|
||||
|
||||
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
|
||||
<el-form :model="form">
|
||||
<el-form-item label="活动名称" :label-width="formLabelWidth">
|
||||
<el-input v-model="form.name" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
多层嵌套:
|
||||
</div>
|
||||
<el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
|
||||
|
||||
<el-dialog title="外层 Dialog" :visible.sync="outerVisible">
|
||||
<el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
居中布局:
|
||||
</div>
|
||||
<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
|
||||
|
||||
<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
|
||||
<span>需要注意的是内容是默认不居中的</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="centerDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
||||
// 页面数据变量
|
||||
return {
|
||||
|
||||
centerDialogVisible: false,
|
||||
outerVisible: false,
|
||||
innerVisible: false,
|
||||
dialogVisible1: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
dialogTableVisible: false,
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '120px',
|
||||
|
||||
// init请求返回的数据
|
||||
data: {},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
抽屉功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
普通功能:
|
||||
</div>
|
||||
<el-radio-group v-model="direction">
|
||||
<el-radio label="ltr">从左往右开</el-radio>
|
||||
<el-radio label="rtl">从右往左开</el-radio>
|
||||
<el-radio label="ttb">从上往下开</el-radio>
|
||||
<el-radio label="btt">从下往上开</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx 0rpx;margin-left: -40rpx;">
|
||||
<el-button @click="drawer = true" type="primary" size="small" style="margin-left: 18px;margin-top: 30rpx;">
|
||||
点我打开
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
<el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
|
||||
<span>我来啦!</span>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
无标题:
|
||||
</div>
|
||||
<el-button @click="data.drawer = true" type="success" size="small" style="width: 160rpx;">
|
||||
点我打开
|
||||
</el-button>
|
||||
|
||||
<el-drawer title="我是标题" :visible.sync="data.drawer" :with-header="false">
|
||||
<span>我来啦!</span>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套内容:
|
||||
</div>
|
||||
|
||||
<el-button type="text" @click="table = true">打开嵌套表格的 Drawer</el-button>
|
||||
<el-button type="text" @click="dialog = true">打开嵌套 Form 的 Drawer</el-button>
|
||||
<el-drawer title="我嵌套了表格!" :visible.sync="table" direction="rtl" size="50%">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</el-drawer>
|
||||
|
||||
<el-drawer title="我嵌套了 Form !" :before-close="handleClose" :visible.sync="dialog" direction="ltr" custom-class="demo-drawer"
|
||||
ref="drawer">
|
||||
<div class="demo-drawer__content">
|
||||
<el-form :model="form">
|
||||
<el-form-item label="活动名称" :label-width="formLabelWidth">
|
||||
<el-input v-model="form.name" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="demo-drawer__footer">
|
||||
<el-button @click="cancelForm">取 消</el-button>
|
||||
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
多层嵌套:
|
||||
</div>
|
||||
<el-button @click="drawer1 = true" type="danger" size="small" style="margin-left: -2px;">
|
||||
点我打开
|
||||
</el-button>
|
||||
|
||||
<el-drawer
|
||||
title="我是外面的 Drawer"
|
||||
:visible.sync="drawer1"
|
||||
size="50%">
|
||||
<div>
|
||||
<el-button @click="innerDrawer = true">打开里面的!</el-button>
|
||||
<el-drawer
|
||||
title="我是里面的"
|
||||
:append-to-body="true"
|
||||
:before-close="handleClose1"
|
||||
:visible.sync="innerDrawer">
|
||||
<p>_(:зゝ∠)_</p>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
drawer1: false,
|
||||
innerDrawer: false,
|
||||
table: false,
|
||||
dialog: false,
|
||||
loading: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '80px',
|
||||
timer: null,
|
||||
drawer: false,
|
||||
direction: 'rtl',
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
drawer: false,
|
||||
direction: 'rtl',
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
handleClose(done) {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定要提交表单吗？')
|
||||
.then(_ => {
|
||||
this.loading = true;
|
||||
this.timer = setTimeout(() => {
|
||||
done();
|
||||
// 动画关闭需要一定的时间
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 400);
|
||||
}, 2000);
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
handleClose1(done) {
|
||||
this.$confirm('还有未保存的工作哦确定关闭吗？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
cancelForm() {
|
||||
this.loading = false;
|
||||
this.dialog = false;
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<view style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
加载功能演示
|
||||
</view>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<view style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
区域加载:
|
||||
</view>
|
||||
<el-table v-loading="loading" :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="date" label="日期" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 自定义加载的内容从这个地方开始 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx;">
|
||||
<view style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
自定义加载:
|
||||
</view>
|
||||
<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="date" label="日期" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<view style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
全屏加载:
|
||||
</view>
|
||||
<el-button type="primary" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading">
|
||||
指令方式
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" @click="openFullScreen2">
|
||||
服务方式
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" @click="doudou=true">
|
||||
自定义方式
|
||||
</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- <view class='popContainer' v-show="doudou" @click="doudou=false">
|
||||
<el-image :draggable="false"
|
||||
style="width: 200rpx; height: 200rpx;text-align: center; margin-left: 50%; margin-top: 800rpx;"
|
||||
src="/static/icon/loading.gif"
|
||||
></el-image>
|
||||
</view> -->
|
||||
|
||||
<view class='popContainer' v-show="doudou" @click="doudou=false">
|
||||
<div
|
||||
class="loadingio-spinner-bean-eater-v394si28re"><div class="ldio-fk6s8i3hzwa">
|
||||
<div><div></div><div></div><div></div></div><div><div></div><div></div><div></div></div>
|
||||
</div></div>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
doudou:false,
|
||||
fullscreenLoading: false,
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
loading: true,
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
openFullScreen1() {
|
||||
this.fullscreenLoading = true;
|
||||
setTimeout(() => {
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen2() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
setTimeout(() => {
|
||||
loading.close();
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen3() {
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.container{
|
||||
position: absolute !important;
|
||||
left: 300 !important;
|
||||
}
|
||||
view.popContainer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 99999;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
.loadingio-spinner-bean-eater-v394si28re{
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
/* transform:scale(0.5) translate(-50%,-50%); */
|
||||
margin-left: -100px;
|
||||
margin-top: -100px;
|
||||
transform:scale(0.5);
|
||||
}
|
||||
|
||||
@keyframes ldio-fk6s8i3hzwa-1 {
|
||||
0% { transform: rotate(0deg) }
|
||||
50% { transform: rotate(-45deg) }
|
||||
100% { transform: rotate(0deg) }
|
||||
}
|
||||
@keyframes ldio-fk6s8i3hzwa-2 {
|
||||
0% { transform: rotate(180deg) }
|
||||
50% { transform: rotate(225deg) }
|
||||
100% { transform: rotate(180deg) }
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(2) {
|
||||
transform: translate(-15px,0);
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(2) div {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
border-radius: 120px 120px 0 0;
|
||||
background: #f8b26a;
|
||||
animation: ldio-fk6s8i3hzwa-1 1s linear infinite;
|
||||
transform-origin: 60px 60px
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(2) div:nth-child(2) {
|
||||
animation: ldio-fk6s8i3hzwa-2 1s linear infinite
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(2) div:nth-child(3) {
|
||||
transform: rotate(-90deg);
|
||||
animation: none;
|
||||
}@keyframes ldio-fk6s8i3hzwa-3 {
|
||||
0% { transform: translate(190px,0); opacity: 0 }
|
||||
20% { opacity: 1 }
|
||||
100% { transform: translate(70px,0); opacity: 1 }
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) {
|
||||
display: block;
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) div {
|
||||
position: absolute;
|
||||
top: 92px;
|
||||
left: -8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #e15b64;
|
||||
animation: ldio-fk6s8i3hzwa-3 1s linear infinite
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) div:nth-child(1) { animation-delay: -0.67s }
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) div:nth-child(2) { animation-delay: -0.33s }
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) div:nth-child(3) { animation-delay: 0s }
|
||||
.loadingio-spinner-bean-eater-v394si28re {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
.ldio-fk6s8i3hzwa {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transform: translateZ(0) scale(1);
|
||||
backface-visibility: hidden;
|
||||
transform-origin: 0 0; /* see note above */
|
||||
}
|
||||
.ldio-fk6s8i3hzwa div { box-sizing: content-box; }
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
消息提示功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding:40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
消息提示:
|
||||
</div>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 确认消息功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
确认消息:
|
||||
</div>
|
||||
<el-button type="text" @click="open1">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 自定义消息功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
确认消息:
|
||||
</div>
|
||||
<el-button type="text" @click="open2">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 使用HTML消息功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
使用HTML片段:
|
||||
</div>
|
||||
<el-button type="text" @click="open3">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 区分取消和关闭 -->
|
||||
<!-- <el-button type="text" @click="open">点击打开 Message Box</el-button> -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
区分取消和关闭:
|
||||
</div>
|
||||
<el-button type="text" @click="open4">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top:-40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
内容居中布局:
|
||||
</div>
|
||||
<el-button type="text" @click="open5">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
open() {
|
||||
this.$alert('这是一段内容', '标题名称', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: `消息内容: ${ action }`
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
open1() {
|
||||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
},
|
||||
open2() {
|
||||
const h = this.$createElement;
|
||||
this.$msgbox({
|
||||
title: '消息',
|
||||
message: h('p', null, [
|
||||
h('span', null, '内容可以是 '),
|
||||
h('i', {
|
||||
style: 'color: teal'
|
||||
}, 'VNode')
|
||||
]),
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
instance.confirmButtonText = '执行中...';
|
||||
setTimeout(() => {
|
||||
done();
|
||||
setTimeout(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
}, 300);
|
||||
}, 3000);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
}).then(action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'action: ' + action
|
||||
});
|
||||
});
|
||||
},
|
||||
open3() {
|
||||
this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
|
||||
dangerouslyUseHTMLString: true
|
||||
});
|
||||
},
|
||||
open4() {
|
||||
this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
|
||||
distinguishCancelAndClose: true,
|
||||
confirmButtonText: '保存',
|
||||
cancelButtonText: '放弃修改'
|
||||
})
|
||||
.then(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '保存修改'
|
||||
});
|
||||
})
|
||||
.catch(action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: action === 'cancel' ?
|
||||
'放弃保存并离开页面' :
|
||||
'停留在当前页面'
|
||||
})
|
||||
});
|
||||
},
|
||||
open5() {
|
||||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
消息提示功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基础用法:
|
||||
</div>
|
||||
<el-button :plain="true" @click="open">打开消息提示</el-button>
|
||||
<el-button :plain="true" @click="openVn">VNode</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
不同状态:
|
||||
</div>
|
||||
<el-button :plain="true" type="success" @click="open2">成功</el-button>
|
||||
<el-button :plain="true" type="warning" @click="open3">警告</el-button>
|
||||
<el-button :plain="true" type="primary" @click="open1">消息</el-button>
|
||||
<el-button :plain="true" type="danger" @click="open4">错误</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 可关闭功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
可关闭:
|
||||
</div>
|
||||
<el-button :plain="true" type="primary" @click="openA">消息</el-button>
|
||||
<el-button :plain="true" type="success" @click="openB">成功</el-button>
|
||||
<el-button :plain="true" type="warning" @click="openC">警告</el-button>
|
||||
<el-button :plain="true" type="danger" @click="openD">错误</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 居中 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
文字居中:
|
||||
</div>
|
||||
<el-button :plain="true" @click="openCenter" type="infor">文字居中</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 嵌入HTML片段 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌入HMTL片段:
|
||||
</div>
|
||||
<el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
open() {
|
||||
this.$message('这是一条消息提示');
|
||||
},
|
||||
openVn() {
|
||||
const h = this.$createElement;
|
||||
this.$message({
|
||||
message: h('p', null, [
|
||||
h('span', null, '内容可以是 '),
|
||||
h('i', {
|
||||
style: 'color: teal'
|
||||
}, 'VNode')
|
||||
])
|
||||
});
|
||||
},
|
||||
openCenter() {
|
||||
this.$message({
|
||||
message: '居中的文字',
|
||||
center: true
|
||||
});
|
||||
},
|
||||
open1() {
|
||||
this.$message('这是一条消息提示');
|
||||
},
|
||||
open2() {
|
||||
this.$message({
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$message({
|
||||
message: '警告哦，这是一条警告消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
open4() {
|
||||
this.$message.error('错了哦，这是一条错误消息');
|
||||
},
|
||||
openA() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '这是一条消息提示'
|
||||
});
|
||||
},
|
||||
|
||||
openB() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
openC() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '警告哦，这是一条警告消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
openD() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '错了哦，这是一条错误消息',
|
||||
type: 'error'
|
||||
});
|
||||
},
|
||||
openHTML() {
|
||||
this.$message({
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>这是 <i>HTML</i> 片段</strong>'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
悬浮提示功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基本用法:
|
||||
</div>
|
||||
|
||||
<el-button plain @click="open1">
|
||||
可自动关闭
|
||||
</el-button>
|
||||
<el-button plain @click="open2">
|
||||
不会自动关闭
|
||||
</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
具有倾向性:
|
||||
</div>
|
||||
<el-button plain @click="openA">
|
||||
成功
|
||||
</el-button>
|
||||
<el-button plain @click="openB">
|
||||
警告
|
||||
</el-button>
|
||||
<el-button plain @click="openC">
|
||||
消息
|
||||
</el-button>
|
||||
<el-button plain @click="openD">
|
||||
错误
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
自定义弹出位置:
|
||||
</div>
|
||||
<el-button plain @click="opena">
|
||||
右上角
|
||||
</el-button>
|
||||
<el-button plain @click="openb">
|
||||
右下角
|
||||
</el-button>
|
||||
<el-button plain @click="openc">
|
||||
左下角
|
||||
</el-button>
|
||||
<el-button plain @click="opend">
|
||||
左上角
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 带有偏移的弹窗 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
带偏移的消息提示:
|
||||
</div>
|
||||
<el-button plain @click="open">
|
||||
偏移的消息
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
使用HTML字段:
|
||||
</div>
|
||||
<el-button plain @click="openuu">
|
||||
使用 HTML 片段
|
||||
</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
不显示关闭按钮:
|
||||
</div>
|
||||
<el-button plain @click="openhide">
|
||||
隐藏关闭按钮
|
||||
</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
//
|
||||
open() {
|
||||
this.$notify({
|
||||
title: '偏移',
|
||||
message: '这是一条带有偏移的提示消息',
|
||||
offset: 100
|
||||
});
|
||||
},
|
||||
open1() {
|
||||
const h = this.$createElement;
|
||||
|
||||
this.$notify({
|
||||
title: '标题名称',
|
||||
message: h('i', {
|
||||
style: 'color: teal'
|
||||
}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '这是一条不会自动关闭的消息',
|
||||
duration: 0
|
||||
});
|
||||
},
|
||||
|
||||
openA() {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '这是一条成功的提示消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
openB() {
|
||||
this.$notify({
|
||||
title: '警告',
|
||||
message: '这是一条警告的提示消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
openC() {
|
||||
this.$notify.info({
|
||||
title: '消息',
|
||||
message: '这是一条消息的提示消息'
|
||||
});
|
||||
},
|
||||
|
||||
openD() {
|
||||
this.$notify.error({
|
||||
title: '错误',
|
||||
message: '这是一条错误的提示消息'
|
||||
});
|
||||
},
|
||||
opena() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '右上角弹出的消息'
|
||||
});
|
||||
},
|
||||
|
||||
openb() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '右下角弹出的消息',
|
||||
position: 'bottom-right'
|
||||
});
|
||||
},
|
||||
|
||||
openc() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '左下角弹出的消息',
|
||||
position: 'bottom-left'
|
||||
});
|
||||
},
|
||||
|
||||
opend() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '左上角弹出的消息',
|
||||
position: 'top-left'
|
||||
});
|
||||
},
|
||||
openuu() {
|
||||
this.$notify({
|
||||
title: 'HTML 片段',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>这是 <i>HTML</i> 片段</strong>'
|
||||
});
|
||||
},
|
||||
openhide() {
|
||||
this.$notify.success({
|
||||
title: 'Info',
|
||||
message: '这是一条没有关闭按钮的消息',
|
||||
showClose: false
|
||||
});
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
悬浮提示功能演示
|
||||
</div>
|
||||
|
||||
<!-- 基本用法 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基本用法:
|
||||
</div>
|
||||
|
||||
<el-popconfirm
|
||||
title="这是一段内容确定删除吗？"
|
||||
>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 自定义功能从这个地方开始 -->
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
自定义用法:
|
||||
</div>
|
||||
<el-popconfirm
|
||||
confirm-button-text='好的'
|
||||
cancel-button-text='不用了'
|
||||
icon="el-icon-info"
|
||||
icon-color="red"
|
||||
title="宁确定要删除吗？"
|
||||
>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
pageTo(path){
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body{
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
提示弹框功能演示
|
||||
</div>
|
||||
|
||||
<!-- 基本用法 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基本用法:
|
||||
</div>
|
||||
<el-popover placement="top-start" title="标题" width="200" style="margin-right: 30rpx;" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">hover 激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover placement="bottom" title="标题" width="200" style="margin-right: 30rpx;" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">click 激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover ref="popover" placement="right" title="标题" width="200" style="" trigger="focus" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
</el-popover>
|
||||
<el-button v-popover:popover style="margin-right: 30rpx;">focus 激活</el-button>
|
||||
|
||||
<el-popover placement="bottom" title="标题" width="200" trigger="manual" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
|
||||
v-model="visible">
|
||||
<el-button slot="reference" @click="visible = !visible">手动激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 自定义功能从这个地方开始 -->
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套信息:
|
||||
</div>
|
||||
<el-popover placement="right" width="400" trigger="click">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column width="150" property="date" label="日期"></el-table-column>
|
||||
<el-table-column width="100" property="name" label="姓名"></el-table-column>
|
||||
<el-table-column width="300" property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
<el-button slot="reference">click 激活</el-button>
|
||||
</el-popover>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 嵌套操作从这个地方开始 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套操作:
|
||||
</div>
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="visible1">
|
||||
<p>这是一段内容这是一段内容确定删除吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="visible1 = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible1 = false">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popover>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
visible1: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
visible: false,
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
文字提示功能演示
|
||||
</div>
|
||||
|
||||
<!-- 基本用法 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基础用法:
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="top">
|
||||
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
|
||||
<el-button>上左</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
|
||||
<el-button>上边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
|
||||
<el-button>上右</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="left">
|
||||
<el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
|
||||
<el-button>左上</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
|
||||
<el-button>左边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
|
||||
<el-button>左下</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
|
||||
<el-button>右上</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
|
||||
<el-button>右边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
|
||||
<el-button>右下</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
|
||||
<el-button>下左</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
|
||||
<el-button>下边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
|
||||
<el-button>下右</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 设置主题功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx; margin-top:-40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
设置主题:
|
||||
</div>
|
||||
<el-tooltip content="Top center" placement="top">
|
||||
<el-button>Dark</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Bottom center" placement="bottom" effect="light">
|
||||
<el-button>Light</el-button>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 更多content功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx; margin-top:-40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
设置主题:
|
||||
</div>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">多行信息<br />第二行信息</div>
|
||||
<el-button>Top center</el-button>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 高级拓展 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx; margin-top:-40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
设置主题:
|
||||
</div>
|
||||
<el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">
|
||||
<el-button @click="disabled = !disabled">点击{{disabled ? '开启' : '关闭'}} tooltip 功能</el-button>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
disabled: false,
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
width: 400px;
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.left .el-tooltip__popper,
|
||||
.right .el-tooltip__popper {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user