wms_app.git - Gitblit

New file
			@@ -0,0 +1,271 @@
			<template>
			<view class="uni-popup-dialog">
			<view class="uni-dialog-title">
			<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
			</view>
			<view v-if="mode === 'base'" class="uni-dialog-content">
			<slot>
			<text class="uni-dialog-content-text">{{content}}</text>
			</slot>
			</view>
			<view v-else class="uni-dialog-content">
			<slot>
			<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholderText" :focus="focus" >
			</slot>
			</view>
			<view class="uni-dialog-button-group">
			<view class="uni-dialog-button" @click="closeDialog">
			<text class="uni-dialog-button-text">{{closeText}}</text>
			</view>
			<view class="uni-dialog-button uni-border-left" @click="onOk">
			<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
			</view>
			</view>

			</view>
			</template>

			<script>
			import popup from '../uni-popup/popup.js'
			import {
			initVueI18n
			} from '@dcloudio/uni-i18n'
			import messages from '../uni-popup/i18n/index.js'
			const { t } = initVueI18n(messages)
			/**
			* PopUp 弹出层-对话框样式
			* @description 弹出层-对话框样式
			* @tutorial https://ext.dcloud.net.cn/plugin?id=329
			* @property {String} value input 模式下的默认值
			* @property {String} placeholder input 模式下输入提示
			* @property {String} type = [success\|warning\|info\|error] 主题样式
			* @value success 成功
			* @value warning 提示
			* @value info 消息
			* @value error 错误
			* @property {String} mode = [base\|input] 模式、
			* @value base 基础对话框
			* @value input 可输入对话框
			* @property {String} content 对话框内容
			* @property {Boolean} beforeClose 是否拦截取消事件
			* @event {Function} confirm 点击确认按钮触发
			* @event {Function} close 点击取消按钮触发
			*/

			export default {
			name: "uniPopupDialog",
			mixins: [popup],
			emits:['confirm','close'],
			props: {
			value: {
			type: [String, Number],
			default: ''
			},
			placeholder: {
			type: [String, Number],
			default: ''
			},
			type: {
			type: String,
			default: 'error'
			},
			mode: {
			type: String,
			default: 'base'
			},
			title: {
			type: String,
			default: ''
			},
			content: {
			type: String,
			default: ''
			},
			beforeClose: {
			type: Boolean,
			default: false
			},
			cancelText:{
			type: String,
			default: ''
			},
			confirmText:{
			type: String,
			default: ''
			}
			},
			data() {
			return {
			dialogType: 'error',
			focus: false,
			val: ""
			}
			},
			computed: {
			okText() {
			return this.confirmText \|\| t("uni-popup.ok")
			},
			closeText() {
			return this.cancelText \|\| t("uni-popup.cancel")
			},
			placeholderText() {
			return this.placeholder \|\| t("uni-popup.placeholder")
			},
			titleText() {
			return this.title \|\| t("uni-popup.title")
			}
			},
			watch: {
			type(val) {
			this.dialogType = val
			},
			mode(val) {
			if (val === 'input') {
			this.dialogType = 'info'
			}
			},
			value(val) {
			this.val = val
			}
			},
			created() {
			// 对话框遮罩不可点击
			this.popup.disableMask()
			// this.popup.closeMask()
			if (this.mode === 'input') {
			this.dialogType = 'info'
			this.val = this.value
			} else {
			this.dialogType = this.type
			}
			},
			mounted() {
			this.focus = true
			},
			methods: {
			/**
			* 点击确认按钮
			*/
			onOk() {
			if (this.mode === 'input'){
			this.$emit('confirm', this.val)
			}else{
			this.$emit('confirm')
			}
			if(this.beforeClose) return
			this.popup.close()
			},
			/**
			* 点击取消按钮
			*/
			closeDialog() {
			this.$emit('close')
			if(this.beforeClose) return
			this.popup.close()
			},
			close(){
			this.popup.close()
			}
			}
			}
			</script>

			<style lang="scss" >
			.uni-popup-dialog {
			width: 300px;
			border-radius: 11px;
			background-color: #fff;
			}

			.uni-dialog-title {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			justify-content: center;
			padding-top: 25px;
			}

			.uni-dialog-title-text {
			font-size: 16px;
			font-weight: 500;
			}

			.uni-dialog-content {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding: 20px;
			}

			.uni-dialog-content-text {
			font-size: 14px;
			color: #6C6C6C;
			}

			.uni-dialog-button-group {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			border-top-color: #f5f5f5;
			border-top-style: solid;
			border-top-width: 1px;
			}

			.uni-dialog-button {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */

			flex: 1;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 45px;
			}

			.uni-border-left {
			border-left-color: #f0f0f0;
			border-left-style: solid;
			border-left-width: 1px;
			}

			.uni-dialog-button-text {
			font-size: 16px;
			color: #333;
			}

			.uni-button-color {
			color: #007aff;
			}

			.uni-dialog-input {
			flex: 1;
			font-size: 14px;
			border: 1px #eee solid;
			height: 40px;
			padding: 0 10px;
			border-radius: 5px;
			color: #555;
			}

			.uni-popup__success {
			color: #4cd964;
			}

			.uni-popup__warn {
			color: #f0ad4e;
			}

			.uni-popup__error {
			color: #dd524d;
			}

			.uni-popup__info {
			color: #909399;
			}
			</style>