main.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. (function (window) {
  2. window.component = {
  3. template: `
  4. <div v-if="visible" class="layui-m-layer" v-bind:class="layerClass">
  5. <div v-on:click="close()" v-if="isShade" class="layui-m-layershade"></div>
  6. <div class="layui-m-layermain">
  7. <div class="layui-m-layersection">
  8. <div v-if="type==2 && !skin" class="layui-m-layerchild layui-m-anim-scale">
  9. <div class="layui-m-layercont"><i></i> <i class="layui-m-layerload"></i> <i></i>
  10. <p>{{ content?content:"" }}</p>
  11. </div>
  12. </div>
  13. <div v-if="ismsg" v-bind:style="msgStyle" class="layui-m-layerchild layui-m-anim-up" v-bind:class="skinClass">
  14. <div class="layui-m-layercont"> <i v-if="icon" style="display:block;font-size:40px;margin:22px" class="icon iconfont" :class="iconClass"></i> {{ content }} </div>
  15. </div>
  16. <div v-if="defaultChild" class="layui-m-layerchild layui-m-anim-up">
  17. <h3 :style="titleStyle" v-if="title">{{ titleText }}</h3>
  18. <div v-html="content" :class="contentClass" class="layui-m-layercont"></div>
  19. <div v-if="btn" class="layui-m-layerbtn">
  20. <template v-for="(item, index) in btn"> <span v-on:click="callback(index)" type="1">{{ item }}</span> </template>
  21. </div>
  22. </div>
  23. <div v-if="isfooter" class="layui-m-layerchild layui-m-anim-up" v-bind:class="skinClass">
  24. <div v-if="content" class="layui-m-layercont">{{ content }}</div>
  25. <div class="layui-m-layerbtn">
  26. <template v-for="(item, index) in btn"> <span :style="footerRadius(index)" v-if="index!=0" no="" v-on:click="callback(index)" type="1">{{ item }}</span> </template> <span v-if="btn.length>0" yes="" v-on:click="callback(0)" type="1">{{ btn[0] }}</span> </div>
  27. </div>
  28. </div>
  29. </div>
  30. </div>`,
  31. props: {
  32. 'content': String,
  33. 'type': {
  34. type: [Number, String],
  35. default: 0
  36. },
  37. 'time': {
  38. type: Number,
  39. default: 0
  40. },
  41. 'skin': {
  42. type: String
  43. },
  44. 'btn': {
  45. type: [String, Array]
  46. },
  47. 'title': {
  48. type: [Array, String]
  49. },
  50. 'icon': {
  51. type: String
  52. },
  53. 'callback': {
  54. type: Function
  55. },
  56. 'contentClass': {
  57. type: String
  58. }
  59. },
  60. created: function created() {
  61. var _this = this;
  62. this.visible = true;
  63. setTimeout(function () {
  64. _this.status = false;
  65. }, 3000);
  66. this.time > 0 ? setTimeout(function () {
  67. _this.visible = false;
  68. }, this.time) : '';
  69. },
  70. computed: {
  71. defaultChild: function defaultChild() {
  72. return this.type == 2 || this.skin == 'msg' || this.skin == 'footer' ? false : true;
  73. },
  74. layerClass: function layerClass() {
  75. return 'layui-m-layer' + this.type;
  76. },
  77. skinClass: function skinClass() {
  78. return 'layui-m-layer-' + this.skin;
  79. },
  80. msgStyle: function msgStyle() {
  81. return {
  82. bottom: this.icon ? 'auto' : ''
  83. };
  84. },
  85. iconClass: function iconClass() {
  86. return this.icon;
  87. },
  88. isShade: function isShade() {
  89. return this.type == 2 || this.skin == 'footer' || this.defaultChild ? true : false;
  90. },
  91. titleText: function titleText() {
  92. return typeof this.title == 'string' ? this.title : this.title[0];
  93. },
  94. titleStyle: function titleStyle() {
  95. return typeof this.title == 'string' ? '' : this.title[1];
  96. },
  97. ismsg: function ismsg() {
  98. return this.skin == 'msg';
  99. },
  100. isfooter: function isfooter() {
  101. return this.skin == 'footer';
  102. }
  103. },
  104. data: function data() {
  105. return {
  106. visible: false,
  107. status: true
  108. };
  109. },
  110. methods: {
  111. close: function close() {
  112. if (this.type === 2) {
  113. return false;
  114. }
  115. this.visible = false;
  116. },
  117. footerRadius: function footerRadius(index) {
  118. return this.btn[index + 1] ? 'border-radius:0;' : 'border-radius: 0 0 5px 5px;';
  119. }
  120. }
  121. };
  122. function getIndexLayer(Vue, props) {
  123. var layerIndex = Vue.extend(component);
  124. return new layerIndex({
  125. el: document.createElement('div'),
  126. propsData: props
  127. });
  128. }
  129. var layer = {
  130. v: '1.0',
  131. instanceList: [],
  132. open: function open(props) {
  133. this.close();
  134. var instance = getIndexLayer(this.vue, props);
  135. this.instanceList.push(instance);
  136. document.body.appendChild(instance.$el);
  137. return instance;
  138. },
  139. close: function close() {
  140. if (this.instanceList.length > 0) {
  141. var item = this.instanceList.pop();
  142. item.visible = false;
  143. this.close();
  144. }
  145. return false;
  146. },
  147. loading: function loading(content) {
  148. var props = {
  149. content: content ? content : '',
  150. type: 2
  151. };
  152. this.open(props);
  153. },
  154. toast: function toast(icon) {
  155. var props = {
  156. content: typeof icon == 'string' ? icon : icon.content ? icon.content : '',
  157. icon: icon.className ? icon.className : '',
  158. skin: 'msg',
  159. time: icon.time ? icon.time : 2000
  160. };
  161. this.open(props);
  162. },
  163. dialog: function dialog(_dialog) {
  164. var self = this;
  165. var props = {
  166. content: _dialog.content ? _dialog.content : '',
  167. time: _dialog.time ? _dialog.time : 0,
  168. title: _dialog.title ? _dialog.title : '',
  169. btn: _dialog.btn ? _dialog.btn : '',
  170. contentClass: _dialog.contentClass ? _dialog.contentClass : ''
  171. };
  172. return new Promise(function (resolve, reject) {
  173. props.callback = function (action) {
  174. resolve(action);
  175. self.close();
  176. };
  177. var instance = self.open(props);
  178. });
  179. },
  180. footer: function footer(data) {
  181. var self = this;
  182. var props = {
  183. skin: 'footer',
  184. content: data.content ? data.content : '',
  185. btn: data.btn ? data.btn : []
  186. };
  187. return new Promise(function (resolve, reject) {
  188. props.callback = function (action) {
  189. resolve(action);
  190. self.close();
  191. };
  192. var instance = self.open(props);
  193. });
  194. }
  195. };
  196. layer.install = function (Vue, options) {
  197. layer.vue = Vue;
  198. Vue.prototype.$layer = layer;
  199. };
  200. module.exports = layer;
  201. })(window);