<template>
<van-overlay :show.sync="show" @click="close">
<div @click.stop class="x-dialog">
<div class="header">{{title}}</div>
<slot></slot>
<div class="footer"><slot name="footer"></slot></div>
</div>
</van-overlay>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false
},
title: {
type: String,
default: '提示'
}
},
data () {
return {
}
},
mounted () {
},
computed: {
},
methods: {
close () {
this.$emit('update:show', false)
}
}
}
</script>
<style lang="scss" scoped>
.x-dialog{
background-color: #fff;
position: fixed;
top: 35%;
left: 50%;
transform: translateX(-50%);
width: 6.2rem;
border-radius: 0.2rem;
.header{
text-align: center;
line-height: 0.42rem;
font-size: 0.3rem;
color: #333;
font-weight: 600;
padding: 0.3rem 0;
}
.footer{
height: 1.1rem;
border-top: 1px solid #EEEEEE;
}
}
</style>
import Vue from 'vue'
const requireComponent = require.context(
'./',
true,
/index.vue$/
)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)
const componentName = fileName.replace(/^\.\//, '').replace(/\/index.vue$/, '')
Vue.component(
componentName,
componentConfig.default || componentConfig
)
})
<template>
<div>
<x-dialog :title="title" :show.sync="show" style="z-index:100">
<van-form ref="dialogForm">
<div class="x-dialog-form">
<van-field
v-model="remark"
name="name"
label=""
rows="3"
type="textarea"
show-word-limit
maxlength="1000"
:placeholder="'请填写' + title"
:rules="[{ required: true, message: '请填写' + title }]"
/>
<van-field name="checkbox" label="通知方式" input-align="right">
<template #input>
<van-checkbox v-model="checkbox" disabled shape="square">系统消息</van-checkbox>
</template>
</van-field>
</div>
</van-form>
<template slot="footer">
<p class="x-dialog-button">
<span class="button" @click="show = false">取消</span>
<span class="button sure" @click="onSubmit">确定</span>
</p>
</template>
</x-dialog>
</div>
</template>
<script>
export default {
name: 'onePop',
data () {
return {
show: false,
remark: '',
checkbox: true
}
},
props: {
title: {
type: String,
default: () => ''
}
},
mounted () {
},
computed: {
},
methods: {
openDia () {
this.show = true
this.$refs.dialogForm.resetValidation()
},
onSubmit (values) {
this.$refs.dialogForm.submit()
}
}
}
</script>
<style lang="scss" scoped>
.x-dialog-form{
padding: 0 0.6rem;
margin-bottom: 0.32rem;
}
.x-dialog-button{
height: 1rem;
.button{
width: 50%;
float: left;
text-align: center;
line-height: 1.1rem;
font-size: 0.3rem;
color: #999;
border: none;
&.sure{
color: #4F9FFA;
}
}
}
</style>
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant from 'vant'
import Global from '@/base/global'
import 'vant/lib/index.css'
import echarts from 'echarts'
import '@/components/index'
import '@/icons/'
import '@/base/rem'
import '@/styles/index.scss'
Vue.prototype.$echarts = echarts
Vue.prototype.Global = new Global(Vue)
Vue.use(Vant)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')