Parcourir la source

解决iframe弹出框字体模糊问题

lsw il y a 10 mois
Parent
commit
7739ea927a

+ 1 - 1
admin-ui/package.json

@@ -57,7 +57,7 @@
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
     "vue-cropper": "0.5.5",
-    "vue-layer": "^1.2.5",
+    "vue-layer": "file:./src/plugins/vue-layer",
     "vue-meta": "2.4.0",
     "vue-print-nb": "^1.7.5",
     "vue-router": "3.4.9",

+ 1 - 1
admin-ui/src/assets/styles/sidebar.scss

@@ -22,7 +22,7 @@
     top: 0;
     bottom: 0;
     left: 0;
-    z-index: 1001;
+    z-index: 500;
     overflow: hidden;
     -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
     box-shadow: 2px 0 6px rgba(0,21,41,.35);

+ 2 - 1
admin-ui/src/main.js

@@ -14,6 +14,8 @@ import router from './router'
 import directive from './directive' // directive
 import plugins from './plugins' // plugins
 import { download,fileDownload } from '@/utils/request'
+import { mixins } from '@/utils/mixins'
+Vue.mixin(mixins);
 
 import tinymce from 'tinymce'
 import VueTinymce from '@packy-tang/vue-tinymce'
@@ -91,7 +93,6 @@ Vue.component('editor', editor)
 Vue.component('file', file)
 Vue.component('images', images)
 Vue.component('dtree', dtree)
-
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)

+ 21 - 0
admin-ui/src/plugins/vue-layer/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-present 左盐
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

+ 245 - 0
admin-ui/src/plugins/vue-layer/README.md

@@ -0,0 +1,245 @@
+[![npm](https://img.shields.io/npm/dw/vue-layer.svg?style=flat-square)](https://www.npmjs.com/package/vue-layer)
+[![npm](https://img.shields.io/bundlephobia/minzip/vue-layer.svg)](https://www.npmjs.com/package/vue-layer)
+[![npm](https://img.shields.io/github/package-json/v/zuoyanart/vue-layer.svg)](https://www.npmjs.com/package/vue-layer)
+[![npm](https://img.shields.io/npm/l/vue-layer.svg)](https://www.npmjs.com/package/vue-layer)
+## vue-layer
+install
+```shell
+npm install vue-layer
+```
+      // "eslint:recommended"
+## Quick Start
+
+在程序入口添加
+```js
+import Vue from 'vue';
+import layer from 'vue-layer'
+import 'vue-layer/lib/vue-layer.css';
+
+Vue.prototype.$layer = layer(Vue);
+```
+全局参数重置
+```js
+import Vue from 'vue';
+import layer from 'vue-layer'
+Vue.prototype.$layer = layer({
+    msgtime: 3,//目前只有一项,即msg方法的默认消失时间,单位:秒
+});
+```
+调用
+```js
+this.$layer.alert("找不到对象!");
+```
+
+## Attribut
+```js
+{
+  type: 0, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
+  title: '信息',
+  content: '',
+  area: 'auto',
+  offset: 'auto',
+  icon: -1,
+  btn: '确定',
+  time: 0,
+  shade: true,//是否显示遮罩
+  yes: '',
+  cancel: '',
+  tips: [0,{}],//支持上右下左四个方向,通过1-4进行方向设定,可以设定tips: [1, '#c00']
+  tipsMore: false,//是否允许多个tips
+  shadeClose: true,//点击遮罩是否关闭
+  maxmin: true,//开启最大化最小化
+  scrollbar: true, //是否允许浏览器出现滚动条:默认是允许
+  resize: false //是否允许拉伸,默认是不允许
+}
+```
+## Method
+```js
+ layer.alert(content, [options, yes]);
+ // options和yes可以省略, 如果您不愿意写options,则可以直接写确定按钮的函数,即yes
+ // content 可以为html
+ //yes如果是个function,这会自动添加参数layerid,
+ (layerid)=>{
+   this.$layer.close(layerid);
+ }
+```
+
+```js
+ layer.confirm(content, [options, yes, cancel]);
+  // options,yes和cancel可以省略, 如果您不愿意写options,则可以直接写确定按钮的函数,即yes,或者覆盖默认的cancel方法。PS:yes和cancel方法不能互换
+  //content 可以为html
+   //yes,cancel如果是个function,这会自动添加参数layerid,
+ (layerid)=>{
+   this.$layer.close(layerid);
+ }
+```
+
+```js
+ layer.loadding(option);
+  // options ={time:3},3秒自动关闭
+  //options = {content:'请等待'} //可传入文字
+```
+
+```js
+ layer.msg(content, [options, end]);
+ // options和end可以省略, 如果您不愿意写options,则可以直接写时间到期的回调即可,即end方法
+ // 默认msg的关闭时间为1.5秒
+ // content 可以为html
+```
+
+
+```js
+ layer.prompt(options, yes);
+ //特殊参数: value 要回显的值
+ //formType: 1text,2password,3textarea
+```
+
+
+```js
+layer.tips(content, follow, options);
+//content 可以为html
+//follow对css选择器,用来定位目标
+```
+```js
+layer.iframe({
+  content: {
+    content: componentName, //传递的组件对象
+    parent: this,//当前的vue对象
+    data:{}//props
+  },
+  area:['800px','600px'],
+  title: 'title',
+  cancel:()=>{//关闭事件
+     alert('关闭iframe');
+  }
+});
+// data参数可认为是componentName的props,同时 该方法会自动添加一个key为layerid的值, 该值为创建层的id, 可以直接用来关闭该层
+// options参数直接写到json里即可,比如title
+```
+```js
+layer.close(id);
+```
+```js
+layer.closeAll(type);
+```
+
+```js
+//弹窗最大化
+layer.full(layerid);
+```
+```js
+//弹窗最小化
+layer.min(layerid);
+```
+```js
+//还原弹窗
+layer.restore(layerid);
+```
+
+
+
+
+### 关于this.$layer.iframe
+ 其实使用iframe层,除了操作方便外,主要的目的是隔离代码, 降低代码复杂度。而在vue中,组件就是功能块的基本单位了,所以vue-layer中并不存在iframe的DOM元素,这里用的都是组件。 这里的content有三个参数:
+
+ ##### content:
+  此参数为组件对象, 比如
+  ```js
+   import editFrom from './edir-form.vue';
+```
+  此处content就为editFrom即可。
+
+  ##### parent:
+
+  此参数其实就是当前调用layer的vue对象, 即this即可。在editForm中可以直接使用, this.$parent来获取调用layer的vue对象,然后父子传值神马的,就很easy,当然也可以直接使用vuex,就不用this.$parent了,另外自动注入了原始数据的浅拷贝lydata,也可以直接赋值这个数据来同步父对象的数据
+
+  ##### data:
+  此参数可认为是editForm的props,传递到iframe后是这个数据的深拷贝,改变数据不会影响来源数据,然后你懂得。
+  > * 该方法会自动添加一个key为layerid的值, 该值为创建层的id, 可以直接使用
+  > * 该方法会自动添加一个key为lydata的值, 该值为data的浅拷贝, 当iframe要更改父窗口传递的数据的时候,可以直接使用lydata来修改,对于表单使用非常方便
+
+结果即为:
+```js
+methods:{
+   eidt() {
+	  this.$layer.iframe({
+		content: {
+		  content: editForm, //传递的组件对象
+		  parent: this,//当前的vue对象
+		  data:{
+        info:{a:1}
+      }//props
+		},
+		area:['800px','600px'],
+		title:"editForm"
+	  });
+  }
+}
+```
+iframe组件中
+```js
+export default {
+  data() {
+    return {
+      form: {
+      }
+    };
+  },
+  props: {
+    info: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    layerid: {
+      type: String,
+      default: ""
+    },
+    lydata: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    lyoption: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  methods: {
+    onSubmit() {
+      this.$layer.msg("提交成功", () => {
+        this.lydata.info.name = this.form.name;
+        this.$layer.close(this.layerid);
+      });
+    },
+    cancel() {
+      this.$layer.close(this.layerid);
+    }
+  },
+  mounted() {
+    this.form = this.info
+  }
+};
+```
+
+
+### 样式调整
+该包的css都为vl-notice开头, 需要重写css样式,覆盖即可
+
+### 觉的作者付出的时间和精力有价值,就给作者买杯咖啡吧
+ <img src="http://static.groot.zuoyanit.com/wx.jpg" width="350" height="350" />
+
+ ### 入群交流
+
+ <img src="http://static.groot.zuoyanit.com/wxp.jpg" width="350" height="350" />
+
+
+
+
+ ### 更新日志
+
+ <a href="https://github.com/zuoyanart/vue-layer/releases">更新日志</a>

Fichier diff supprimé car celui-ci est trop grand
+ 40 - 0
admin-ui/src/plugins/vue-layer/lib/img/iconfont.a3512340.svg


Fichier diff supprimé car celui-ci est trop grand
+ 118 - 0
admin-ui/src/plugins/vue-layer/lib/vue-layer.css


Fichier diff supprimé car celui-ci est trop grand
+ 5813 - 0
admin-ui/src/plugins/vue-layer/lib/vue-layer.umd.min.js


+ 98 - 0
admin-ui/src/plugins/vue-layer/package.json

@@ -0,0 +1,98 @@
+{
+  "_from": "vue-layer@^1.2.5",
+  "_id": "vue-layer@1.2.5",
+  "_inBundle": false,
+  "_integrity": "sha512-rwHFuOxvtuMCSZmWKvHeLF0VyVtzUvG248moXs/llECXXZ6vUvUBHW8REWhKL4Xje9TcyWzdUUBMF8c5BgSTag==",
+  "_location": "/vue-layer",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "range",
+    "registry": true,
+    "raw": "vue-layer@^1.2.5",
+    "name": "vue-layer",
+    "escapedName": "vue-layer",
+    "rawSpec": "^1.2.5",
+    "saveSpec": null,
+    "fetchSpec": "^1.2.5"
+  },
+  "_requiredBy": [
+    "/"
+  ],
+  "_resolved": "https://registry.npmmirror.com/vue-layer/-/vue-layer-1.2.5.tgz",
+  "_shasum": "2a6e66e9a506dd74eea4e51fca2bd9a516ec8ff0",
+  "_spec": "vue-layer@^1.2.5",
+  "_where": "D:\\work\\project\\idea\\work\\hospital\\admin-ui",
+  "author": {
+    "name": "左盐/huabinglan@163.com"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
+  "bugs": {
+    "url": "https://github.com/zuoyanart/vue-layer/issues"
+  },
+  "bundleDependencies": false,
+  "dependencies": {},
+  "deprecated": false,
+  "description": "vue layer component",
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.5.12",
+    "@vue/cli-plugin-eslint": "^4.5.12",
+    "@vue/cli-service": "^4.5.12",
+    "babel-eslint": "^10.1.0",
+    "core-js": "^3.9.1",
+    "css-loader": "^5.2.0",
+    "element-ui": "^2.15.1",
+    "eslint": "^7.23.0",
+    "eslint-plugin-vue": "^7.8.0",
+    "less": "^4.1.1",
+    "less-loader": "^7.3.0",
+    "vue": "^2.6.12",
+    "vue-template-compiler": "^2.6.12"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {
+      "vue/no-mutating-props": 0
+    },
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "homepage": "https://github.com/zuoyanart/vue-layer#readme",
+  "keywords": [
+    "vue",
+    "layer",
+    "vue-layer",
+    "zuoyan"
+  ],
+  "license": "MIT",
+  "main": "./lib/vue-layer.umd.min.js",
+  "name": "vue-layer",
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zuoyanart/vue-layer.git"
+  },
+  "scripts": {
+    "build": "vue-cli-service build",
+    "lib": "vue-cli-service build --target lib --name vue-layer --dest lib packages/layer/index.js",
+    "lint": "vue-cli-service lint",
+    "serve": "vue-cli-service serve",
+    "start": "vue-cli-service serve"
+  },
+  "version": "1.2.5"
+}

+ 22 - 0
admin-ui/src/utils/mixins.js

@@ -0,0 +1,22 @@
+export const mixins = {
+  data() {
+    return {
+      ids: [],
+      showSearch: true,
+      response: {},
+      dateRange: [],
+    }
+  },
+  props: {
+    param: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    layerid: {
+      type: String
+    }
+  },
+  methods: {}
+}

+ 2 - 2
admin-ui/src/utils/ruoyi.js

@@ -315,8 +315,8 @@ export function iframe(opt) {
     area: [opt.width, opt.height],
     shade: true,
     shadeClose: false,
-    resize: true,
-    maxmin: true,
+    resize: false,
+    maxmin: false,
     scrollbar: false,
     title: opt.title
   });

+ 0 - 11
admin-ui/src/views/work/follow/template/edit.vue

@@ -112,17 +112,6 @@ export default {
       }
     };
   },
-  props: {
-    param: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    layerid: {
-      type: String
-    }
-  },
   mounted() {
     if (this.param.id) {
       this.ajax({ url: '/work/follow/template/detail/' + this.param.id }).then((response) => {

+ 0 - 11
admin-ui/src/views/work/knowledge/edit.vue

@@ -46,17 +46,6 @@ export default {
       }
     };
   },
-  props: {
-    param: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    layerid: {
-      type: String
-    }
-  },
   mounted() {
     if (this.param.id) {
       this.ajax({ url: '/work/knowledge/detail/' + this.param.id }).then((response) => {

+ 0 - 4
admin-ui/src/views/work/knowledge/index.vue

@@ -56,10 +56,6 @@ export default {
   name: 'Knowledge',
   data() {
     return {
-      ids: [],
-      showSearch: true,
-      response: {},
-      dateRange: [],
       queryParams: {
         pageNum: 1,
         pageSize: 10,

Certains fichiers n'ont pas été affichés car il y a eu trop de fichiers modifiés dans ce diff