Node Sass version 5.0.0 is incompatible with^4.0.0
卸载已安装版本 cnpm uninstall node-sass
安装 cnpm install node-sass@4.14.1
vue 调用 public 中引用的外部 js 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="c.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>$(function () {
console.log('这里是最外层的js')
})
var callVue = {
closeLdb: function () {
console.log('调用到了closeldb')
console.log(window)
console.log(window.external)
window.external.CloseFlowArrangeWindow()
}
}
function myClose() {
console.log('外部自己的close')
}
function recvPara(type) {
console.log(type)
console.log(typeof type)
}// 调用外部的关闭
CloseFlowArrangeWindow () {
callVue.closeLdb()
}vue.config.js - 打包的文件带上版本号
const Version = new Date().getTime() + '-2.0.0.2'
const webpack = require('webpack')
module.exports = {
publicPath: './',
lintOnSave: false,
outputDir: 'dist', // 构建输出目录
assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
configureWebpack: {
output: {
filename: `js/[name].${Version}.js`,
chunkFilename: `js/[name].${Version}.js`
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'windows.jQuery': 'jquery'
})
]
},
devServer: {
disableHostCheck: true,
port: 80,
proxy: {
'/': {
target: 'http://192.168.8.8:8888/',
changeOrigin: true,
ws: false
}
}
}
}
el-tree - 选中父级，子级不选中
组件
<!--
选中父级，子级不选中
-->
<template>
<div>
<el-tree
:data="data"
:props="props"
:check-strictly="checkStrictly"
ref="tree"
:node-key="nodeKey"
@check="getCheckedKeys"
show-checkbox
:default-expanded-keys="Expandeds"
:default-checked-keys="Selecteds">
</el-tree>
</div>
</template>
<script>
export default {
props: {
/* checkStrictly: {
type: Boolean,
default () {
return false
}
}, */
nodeKey: {
type: String,
default () {
return []
}
},
Selecteds: {
type: Array,
default () {
return []
}
},
Expandeds: {
type: Array,
default () {
return []
}
},
options: {
type: Array,
default () {
return []
}
},
// 树节点配置选项
props: {
type: Object,
default () {
return []
}
}
},
data () {
return {
TreeData: [],
AllData: [],
flag: false,
checkStrictly: true
}
},
watch: {
Selecteds () {
// this.TreeData = this.Selecteds
let that = this
this.checkStrictly = true
this.$nextTick(() => {
that.TreeData = that.Selecteds
that.$refs.tree.setCheckedKeys(that.Selecteds)
// that.checkStrictly = false
})
}
},
computed: {
data () {
return this.options
}
},
methods: {
orgCheckChange (data, checked, indeterminate) {
},
/* 获取当前树的ID值 */
getCheckedKeys (node, keys) {
// console.log(node)
// console.log(keys)
let that = this
this.flag = true
// let checkedKeys = keys.checkedKeys
// let halfChecked = keys.halfCheckedKeys
// let checkArr = checkedKeys.concat(halfChecked)
// this.TreeData = checkedKeys
// this.AllData = checkArr
this.setNode(this.$refs.tree.getNode(node.locationId))
this.$nextTick(function () {
that.AllData = that.$refs.tree.getCheckedKeys()
})
},
// 递归设置子节点和父节点
setNode (node) {
if (node.checked) {
// 如果当前是选中checkbox,则递归设置父节点和父父节点++选中
this.setParentNode(node)
} else {
// 如果当前是取消选中checkbox,则递归设置子节点全部取消选中
this.setChildNode(node)
}
},
// 递归设置父节点全部选中
setParentNode (node) {
if (node.parent) {
for (const key in node) {
if (key === 'parent') {
node[key].checked = true
this.setParentNode(node[key])
}
}
}
},
// 递归设置子节点全部取消选中
setChildNode (node) {
if (node.childNodes && node.childNodes.length) {
node.childNodes.forEach(item => {
item.checked = false
this.setChildNode(item)
})
}
}
}
}
</script>Vue - 强制刷新组件(销毁并重置)
<el-dialog :visible.sync="reportDialogVisible">
<Report :reportInfo="reportInfo" v-if="hackReset"></Report>
</el-dialog>
// 声明hackReset，利用true或者false实现重建或者销毁
this.hackReset = false;// 销毁组件
this.$nextTick(() => {
this.hackReset = true;// 重建组件
});vue - el-form 的多层循环表单验证
html
<el-form :model="formObj" :rules="rules" ref="ruleForm">
<el-form-item :label="'护理记录项目配置：'" label-width="180px">
<template v-for="(formItem, index) in formObj.formDictExtendDoList">
<div class="hljl-container" :key="formItem.id">
<el-row>
<el-col :span="8">
<el-form-item
:label="'字段名称：'"
label-width="90px"
:rules="rules.fieldName"
:prop="'formDictExtendDoList.'+index+'.fieldName'"
>
<el-input
v-model.trim="formItem.fieldName"
type="text"
:clearable="true"
maxLength="100"
placeholder="请输入"
/>
<!--@blur="isRepeat(formItem, index, 'fieldName')"-->
</el-form-item>
</el-col>
<template
v-for="(child, index1) in formItem.item"
v-show="formItem.type === 2"
>
<el-col :span="8" :key="child.id">
<el-form-item
:label="'选项' + (index1+1) + '：'"
label-width="90px"
:rules="rules.value"
:prop="'formDictExtendDoList.'+index+'.item.'+index1+'.value'"
>
<el-input
v-model.trim="child.value"
@input="forceUpdate"
:clearable="true"
type="text"
maxlength="20"
placeholder="请输入"
/>
</el-form-item>
</el-col>
</template>
</el-row>
</div>
</template>
</el-form-item>
</el-form>
js
vue - 在 element-UI 组件的 change 事件中传递自定义参数
<el-radio-group
v-model="formItem.focus"
@change="(val) => itemRadioChange(val, formItem)"
>
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>vue - number 类型的 el-input 的限制输入长度方法
<el-input
v-model.trim="formItem.fieldLength"
type="number"
:clearable="true"
oninput="if(value.length>5)value=value.slice(0, 5)"
placeholder="请输入"
/>