uni-popup-dialog.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <template>
  2. <view class="uni-popup-dialog">
  3. <view class="uni-dialog-title">
  4. <text :class="['uni-popup__'+dialogType]" class="uni-dialog-title-text">{{ titleText }}</text>
  5. </view>
  6. <view v-if="mode === 'base'" class="uni-dialog-content">
  7. <slot>
  8. <text class="uni-dialog-content-text">{{ content }}</text>
  9. </slot>
  10. </view>
  11. <view v-else class="uni-dialog-content">
  12. <slot>
  13. <input v-model="val" :focus="focus" :placeholder="placeholderText" class="uni-dialog-input" type="text">
  14. </slot>
  15. </view>
  16. <view class="uni-dialog-button-group">
  17. <view class="uni-dialog-button" @click="closeDialog">
  18. <text class="uni-dialog-button-text">{{ closeText }}</text>
  19. </view>
  20. <view class="uni-dialog-button uni-border-left" @click="onOk">
  21. <text class="uni-dialog-button-text uni-button-color">{{ okText }}</text>
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. import popup from '../uni-popup/popup.js'
  28. import {initVueI18n} from '@dcloudio/uni-i18n'
  29. import messages from '../uni-popup/i18n/index.js'
  30. const {t} = initVueI18n(messages)
  31. /**
  32. * PopUp 弹出层-对话框样式
  33. * @description 弹出层-对话框样式
  34. * @tutorial https://ext.dcloud.net.cn/plugin?id=329
  35. * @property {String} value input 模式下的默认值
  36. * @property {String} placeholder input 模式下输入提示
  37. * @property {String} type = [success|warning|info|error] 主题样式
  38. * @value success 成功
  39. * @value warning 提示
  40. * @value info 消息
  41. * @value error 错误
  42. * @property {String} mode = [base|input] 模式、
  43. * @value base 基础对话框
  44. * @value input 可输入对话框
  45. * @property {String} content 对话框内容
  46. * @property {Boolean} beforeClose 是否拦截取消事件
  47. * @event {Function} confirm 点击确认按钮触发
  48. * @event {Function} close 点击取消按钮触发
  49. */
  50. export default {
  51. name: "uniPopupDialog",
  52. mixins: [popup],
  53. emits: ['confirm', 'close'],
  54. props: {
  55. value: {
  56. type: [String, Number],
  57. default: ''
  58. },
  59. placeholder: {
  60. type: [String, Number],
  61. default: ''
  62. },
  63. type: {
  64. type: String,
  65. default: 'error'
  66. },
  67. mode: {
  68. type: String,
  69. default: 'base'
  70. },
  71. title: {
  72. type: String,
  73. default: ''
  74. },
  75. content: {
  76. type: String,
  77. default: ''
  78. },
  79. beforeClose: {
  80. type: Boolean,
  81. default: false
  82. },
  83. cancelText: {
  84. type: String,
  85. default: ''
  86. },
  87. confirmText: {
  88. type: String,
  89. default: ''
  90. }
  91. },
  92. data() {
  93. return {
  94. dialogType: 'error',
  95. focus: false,
  96. val: ""
  97. }
  98. },
  99. computed: {
  100. okText() {
  101. return this.confirmText || t("uni-popup.ok")
  102. },
  103. closeText() {
  104. return this.cancelText || t("uni-popup.cancel")
  105. },
  106. placeholderText() {
  107. return this.placeholder || t("uni-popup.placeholder")
  108. },
  109. titleText() {
  110. return this.title || t("uni-popup.title")
  111. }
  112. },
  113. watch: {
  114. type(val) {
  115. this.dialogType = val
  116. },
  117. mode(val) {
  118. if (val === 'input') {
  119. this.dialogType = 'info'
  120. }
  121. },
  122. value(val) {
  123. this.val = val
  124. }
  125. },
  126. created() {
  127. // 对话框遮罩不可点击
  128. this.popup.disableMask()
  129. // this.popup.closeMask()
  130. if (this.mode === 'input') {
  131. this.dialogType = 'info'
  132. this.val = this.value
  133. } else {
  134. this.dialogType = this.type
  135. }
  136. },
  137. mounted() {
  138. this.focus = true
  139. },
  140. methods: {
  141. /**
  142. * 点击确认按钮
  143. */
  144. onOk() {
  145. if (this.mode === 'input') {
  146. this.$emit('confirm', this.val)
  147. } else {
  148. this.$emit('confirm')
  149. }
  150. if (this.beforeClose) return
  151. this.popup.close()
  152. },
  153. /**
  154. * 点击取消按钮
  155. */
  156. closeDialog() {
  157. this.$emit('close')
  158. if (this.beforeClose) return
  159. this.popup.close()
  160. },
  161. close() {
  162. this.popup.close()
  163. }
  164. }
  165. }
  166. </script>
  167. <style lang="scss">
  168. .uni-popup-dialog {
  169. width: 300px;
  170. border-radius: 11px;
  171. background-color: #fff;
  172. }
  173. .uni-dialog-title {
  174. /* #ifndef APP-NVUE */
  175. display: flex;
  176. /* #endif */
  177. flex-direction: row;
  178. justify-content: center;
  179. padding-top: 25px;
  180. }
  181. .uni-dialog-title-text {
  182. font-size: 16px;
  183. font-weight: 500;
  184. }
  185. .uni-dialog-content {
  186. /* #ifndef APP-NVUE */
  187. display: flex;
  188. /* #endif */
  189. flex-direction: row;
  190. justify-content: center;
  191. align-items: center;
  192. padding: 20px;
  193. }
  194. .uni-dialog-content-text {
  195. font-size: 14px;
  196. color: #6C6C6C;
  197. }
  198. .uni-dialog-button-group {
  199. /* #ifndef APP-NVUE */
  200. display: flex;
  201. /* #endif */
  202. flex-direction: row;
  203. border-top-color: #f5f5f5;
  204. border-top-style: solid;
  205. border-top-width: 1px;
  206. }
  207. .uni-dialog-button {
  208. /* #ifndef APP-NVUE */
  209. display: flex;
  210. /* #endif */
  211. flex: 1;
  212. flex-direction: row;
  213. justify-content: center;
  214. align-items: center;
  215. height: 45px;
  216. }
  217. .uni-border-left {
  218. border-left-color: #f0f0f0;
  219. border-left-style: solid;
  220. border-left-width: 1px;
  221. }
  222. .uni-dialog-button-text {
  223. font-size: 16px;
  224. color: #333;
  225. }
  226. .uni-button-color {
  227. color: #007aff;
  228. }
  229. .uni-dialog-input {
  230. flex: 1;
  231. font-size: 14px;
  232. border: 1px #eee solid;
  233. height: 40px;
  234. padding: 0 10px;
  235. border-radius: 5px;
  236. color: #555;
  237. }
  238. .uni-popup__success {
  239. color: #4cd964;
  240. }
  241. .uni-popup__warn {
  242. color: #f0ad4e;
  243. }
  244. .uni-popup__error {
  245. color: #dd524d;
  246. }
  247. .uni-popup__info {
  248. color: #909399;
  249. }
  250. </style>