1、常规组件 传值 有2种写法
- 开发部分
- 推荐的第一种 对象形式 接收
- 第二 数组形式 接收
- 官网描述
- 常规 父--->子
- 子 ---> 父 方法
2、class/style 动态控制
-
开发部分
-
官网
-
对象语法
- 数组语法
-
用在组件上
-
style 直接定义 推荐
-
多重值
- vue 会给不同浏览器 加不同前缀
3、后端给的是 一些字段的 id 前端需要展示出这些字段
-
第一种方式 推荐
-
先将这些值拿到 并放在 store 中
import to from 'await-to-js';
import scriptApi from '@/api/modules/scriptApi';
const idMap = localStorage.getItem('pia-idMap');
let map = {};
if (idMap) {
try {
map = JSON.parse(idMap);
} catch (error) {
//
}
}
function format(arr) {
const obj = {};
arr.forEach(item => {
// eslint-disable-next-line no-underscore-dangle
obj[item._id] = item.data;
});
return obj;
}
// 第一个参数是应用程序中 store 的唯一 id
export default defineStore('script-config', {
state: () => ({
// 下面5个都是剧本的属性的映射关系
historicalBg: map.historicalBg || [],
source: map.source || [],
type: map.type || [],
authorization: map.authorization || [],
label: map.label || [],
}),
getters: {},
actions: {
// 获取映射关系
async initMap() {
const [err, res] = await to(scriptApi.init());
const code = res?.code;
if (err || code !== 0) {
return;
}
const { data } = res;
// eslint-disable-next-line no-restricted-syntax
for (const key in data) {
// eslint-disable-next-line no-prototype-builtins
if (data.hasOwnProperty(key)) {
data[key] = format(data[key]);
}
}
this.historicalBg = data.historicalBg;
this.source = data.source;
this.type = data.type;
this.authorization = data.authorization;
this.label = data.label;
localStorage.setItem('pia-idMap', JSON.stringify(data));
},
},
});
- api
- localStorage 中也存了
- 使用
- 第二种方式 如果用在一些 没有关联的页面比较合适 当然此处可优化
- 页面直接调用
4、这种选项框 内容传递问题 如果使用 value 将无法 传递 自定义数据
-
这样写
-
使用
5、常用的页面/表单刷新方法
-
最不建议的是 window.location.reload()
非常的不现代化，体验非常的差 -
推荐方式 使用 ref
- getList 调取接口
6、值得注意的 switch 开关状态 控制
- 点击取消时 刷新 恢复
- 点击 确认后发请求
- 需要控制 Modal 显示隐藏
7、关于弹窗 Modal 和 confirm 选择
- 比较丑的 表现
- 使用 这种语法 更改为上面的表达
this.$Modal.confirm({ content: `<h3>询问内容？</h3>`, onOk: async () => { this.$Message.success('操作成功') }, })
8、关于组件封装和页面简化
-
其实
比较忌讳的是 写一些重复页面，这样会导致 写起来，包括后面的维护都变得比较困难 -
我想
每个行业 应该都会注重 重复性，重复的 代码 或者模版 往往 被视为是更好的表达 -
简单来说 就是
复用 -
比如下面这个例子 3个tab 内容比较类似 ，可以写三个页面，当然也可以 写一个 组件 其他的页面
传递一些参数
9、关于搜索/选择框数据渲染问题
- 这种 选择框的数据 需要动态生成，不能是固定写死的
-
看下解决方式
-
data 中的 初始搜索项目为 空
- 点击 搜索 后是这样的
10、方便新添加的数据管理，按钮状态切换实现参考
- 目的是 新添加的 内容 不要 立即在网站上生效，可以做二次确认或者审核
11、数据 移动 + 序号变更
- 移动使用的是 Sortable.js
- 序号变更 需要给后端传递数据 传递 currentIndex, targetIndex
11、使用 @/utils/xslx 读取或者导入 Excel
- 下载模版
- 上传文件
- 看一下效果
12、有个 detail 页面 需要跳到新页面
- 参考实现
- 暂时 写这么多，未完待续......
