新建盐城德森项目

skyouc

2024-12-21 c9c263dc43ad90f95f24a036cee9e6b47afb596c

 uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue

@@ -1,271 +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>
<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>