自问自答吧,封装个disabled属性差不多就够用了
没有足够的数据
醉逍遥 回答了问题 · 1月14日
自问自答吧,封装个disabled属性差不多就够用了
自问自答吧,封装个disabled属性差不多就够用了
关注 1 回答 1
醉逍遥 提出了问题 · 1月8日
子组件:
<template>
<teleport to="body">
<div>
<h4>示例</h4>
</div>
</teleport>
</template>
父组件:
<style lang="less" scoped>
:deep(h4) {
color: red !important;
}
</style>
组件封装过程中突然发现的这个问题,请问有什么比较好的解决方法?
具体场景:子组件是弹窗基础公共组件,所以封装使用了teleport标签,默认to指向body,在父组件引用时有时会有微调内部样式的需求。
子组件: {代码...} 父组件: {代码...} 组件封装过程中突然发现的这个问题,请问有什么比较好的解决方法?具体场景:子组件是弹窗基础公共组件,所以封装使用了teleport标签,默认to指向body,在父组件引用时有时会有微调内部样式的需求。
关注 1 回答 1
醉逍遥 提出了问题 · 1月8日
子组件:
<template>
<teleport to="body">
<div>
<h4>示例</h4>
</div>
</teleport>
</template>
父组件:
<style lang="less" scoped>
:deep(h4) {
color: red !important;
}
</style>
组件封装过程中突然发现的这个问题,请问有什么比较好的解决方法?
具体场景:子组件是弹窗基础公共组件,所以封装使用了teleport标签,默认to指向body,在父组件引用时有时会有微调内部样式的需求。
子组件: {代码...} 父组件: {代码...} 组件封装过程中突然发现的这个问题,请问有什么比较好的解决方法?具体场景:子组件是弹窗基础公共组件,所以封装使用了teleport标签,默认to指向body,在父组件引用时有时会有微调内部样式的需求。
关注 1 回答 1
醉逍遥 回答了问题 · 1月5日
各有利弊吧,
用h5的就是完全h5自己控制,最大的优势就是头部可定制性高,特别是导航头右边可能会有各种定制需求,最大的缺点就是导航头离顶部的间距不好处理,得考虑刘海屏的显示效果,
用app的,最大的优势就是用户体验好,包括顶部间距自适应,不会完全白屏等等,但是导航头可定制性差。
要不要用app的,就看你们产品能不能接受导航头统一样式,参考微信内置浏览器或者钉钉内置浏览器的效果,
当然也可以选择两个都要,不同场景选择不同的方式。
各有利弊吧,用h5的就是完全h5自己控制,最大的优势就是头部可定制性高,特别是导航头右边可能会有各种定制需求,最大的缺点就是导航头离顶部的间距不好处理,得考虑刘海屏的显示效果,用app的,最大的优势就是用户体验好,包括顶部间距自适应,不会完全白屏等等,但...
关注 3 回答 3
醉逍遥 赞了文章 · 2020-12-24
Vant 是有赞前端团队开源的一套轻量、可靠的移动端组件库。
历经八个月时长的开发,Vant 3.0 终于和大家正式见面咯。在本次迭代中,我们的主要工作是基于 Vue 3 重构整个代码仓库和周边生态,并发布 Vant 3.0、Vant Cli 3.0 和 Vant Use 1.0。
按照惯例,我们先简单回顾一下 Vant 开源至今的成绩:
Vue 3 带来了许多激动人心的新特性,比如 Composition API、emits Option 和 Teleport。在 Vant 3.0 中,我们全面拥抱了 Vue 3 带来的各种变化,完成下列改造:
重构完成后,组件之间可以基于 Composition API 进行逻辑复用,代码的可压缩性也有所提升。与 Vant 2.12 版本进行对比,可以看到 Vant 3.0 的 JS 体积下降了 16.6%,Gzip 后体积下降至 67.5kb。
Vant 3.0 中包含 3 个全新的组件,分别是:
考虑到大部分开发者仍然在使用 Vue 2 进行开发,我们在 Vant 2 中同步实现了以上三个组件,大家可以升级到 Vant 2.12 版本进行使用。
Vant Use 从 Vant 中沉淀出的 Composition API 库。除了提供常用的 Composition API 外,Vant Use 也会将某些组件的逻辑抽离出来,让开发者在使用组件逻辑的同时,能够完全自定义组件的展现形式。
下面是一个简单的例子,我们将 CountDown 组件的倒计时逻辑抽象为 useCountDown
方法,功能与 CountDown 组件基本等价,但使用起来更加灵活,我们可以自定义倒计时的 UI 样式,或者通过 computed
对倒计时进行预处理。
Vant Use 仍然处于早期阶段,在未来的演进过程中,我们会继续抽离 Vant 组件内部的通用逻辑,并下沉到 Vant Use 中。
Vant Cli 是 Vant 底层的组件库构建工具,通过 Vant Cli 可以快速搭建一套功能完备的 Vue 组件库。在 Vant Cli 3.0 中,我们对所有底层依赖进行了大版本升级,在支持 Vue 3 的同时,提供更流畅的开发体验。
在创建 vant-cli
工程时,你可以自由选择基于 Vue 2 或者 Vue 3 进行组件库开发:
Vant Demo 是 Vant 官方提供的示例工程合集,在本次迭代中,我们新增了 2 个示例工程,分别演示:
许多喜欢尝鲜的小伙伴已经在使用 Vite 进行开发了,在使用 Vite 的过程中,经常令大家困惑的一点是,如何在 Vite 中进行按需引入 Vant 组件。在 Vue Cli 中,我们可以通过 babel-plugin-import 插件实现按需引入,但在 Vite 中无法使用该插件。
其实在 Vite 中无须考虑按需引入的问题。Vite 在构建代码时,会自动通过 Tree Shaking 移除未使用的 ESM 模块。而 Vant 3.0 内部所有模块都是基于 ESM 编写的,天然具备按需引入的能力。现阶段遗留的问题是,未使用的组件样式无法被 Tree Shaking 识别并移除,后续我们会考虑通过 Vite 插件的方式进行支持。
目前,Vant 官网默认展示 Vant 2 的 API 文档,你可以通过官网右上角的版本切换按钮访问 Vant 3 的文档,也可以 👉 点此访问。
同时,Vant 的 npm latest 标签也保持在 v2 版本,这意味着使用 npm install vant
命令仍会安装 Vant 2,而安装 Vant 3 需要使用 npm install vant@next
命令。在 Vue 的默认文档版本和 npm 标签切换为 v3 后,我们也会同步进行切换。
从现有 Vant 2 项目升级,请参考 🚀 升级指南。
未来 6 ~ 12 个月内,我们会保持 Vant 2 和 Vant 3 的功能同步更新。随着 Vue 3 的普及,我们会逐步降低 Vant 2 的维护频率,并将工作重心转移到 Vant 3 上。
另外,除了官方维护的 Vue 版本和微信小程序版本,Vant 也有由社区的小伙伴们发起和维护的 React 版本和支付宝小程序版本,欢迎大家一起参与建设 💪
不平凡的 2020 年即将过去,希望 Vant 能给大家的工作带来一点点的帮助,我们明年再会。
查看原文历经八个月时长的开发,Vant 3.0 终于和大家正式见面咯。在本次迭代中,我们的主要工作是基于 Vue 3 重构整个代码仓库和周边生态,并发布 Vant 3.0、Vant Cli 3.0 和 Vant Use 1.0。
赞 15 收藏 5 评论 3
醉逍遥 回答了问题 · 2020-12-24
404就是你请求的实际接口地址在后端找不到。
需要提供很多信息才能判断具体原因,比如是本地开发还是打包部署后的、你的process.env.VUE_APP_BASE_API值是什么、本地代理怎么配置的、后端完整的接口地址是什么
404就是你请求的实际接口地址在后端找不到。需要提供很多信息才能判断具体原因,比如是本地开发还是打包部署后的、你的process.env.VUE_APP_BASE_API值是什么、本地代理怎么配置的、后端完整的接口地址是什么
关注 2 回答 2
醉逍遥 回答了问题 · 2020-12-24
主要原因是你setup里定义的变量show没有添加响应式。
需要把初始值用ref包裹才能使变量被vue的响应式监听到:
const show = ref(false)
然后改变变量值的时候需要使用show.value:
show.value = true
主要原因是你setup里定义的变量show没有添加响应式。需要把初始值用ref包裹才能使变量被vue的响应式监听到: {代码...} 然后改变变量值的时候需要使用show.value: {代码...}
关注 1 回答 1
醉逍遥 赞了回答 · 2020-12-24
只找你有用到 v-html
或是富文本编辑器的地方改就可以了,其他的地方 Vue 已经帮你处理过了。
另外 XSS 是一个前后端配合的活儿,后端入库时也应该处理。
只找你有用到 v-html 或是富文本编辑器的地方改就可以了,其他的地方 Vue 已经帮你处理过了。另外 XSS 是一个前后端配合的活儿,后端入库时也应该处理。
关注 5 回答 5
醉逍遥 回答了问题 · 2020-12-24
这种需求不应该用自定义指令,应该考虑在特定的events事件里手动触发,必要时可以配合$nextTick。
这种需求不应该用自定义指令,应该考虑在特定的events事件里手动触发,必要时可以配合$nextTick。
关注 3 回答 3
醉逍遥 赞了回答 · 2020-12-23
let obj = {a:12,b:32};
Object.keys(obj).map(k => {
console.log(k); // a,b
console.log(obj[k]); // 12,32
})
{代码...}
关注 4 回答 3
查看全部 个人动态 →
(゚∀゚ )
暂时没有
注册于 2018-10-15
个人主页被 547 人浏览
推荐关注