uni-popup-dialog.vue 5.5 KB

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