【新】Emlog小程序-Brief5.0
【新】Emlog小程序-Brief5.0
介绍 EmlogPro官方出了Api接口,比以往的插件版Brief使用更方便,所以我另外重新写了一个程序,还叫Brief Brirf-5.0使用uni-app开发,适配安卓、iOS、小程序 Rro的Api接口还不完善,所以实现的功能可能没有老版本多,等到新的接口发布,我会第一时间更新! console.log("Hello Brief"); echo "Brief is OK!"; alert("Fewer and fewer bugs") 安装教程 导入项目到HBuilderX 修改setting.js内的配置信息 注册账号(http://tp.hkiii.cn) 联系我激活账号即可 历史版本 Brief3.0---设置教程 更新记录 2022-05-04 项目开始时间 新增文章发布 2022-06-12 新增文章列表和文章详情 文章发布支持标签 修复小bug 2022-06-15 文章发布支持上传图片到七牛云 2022-06-17 新增文章发布验证 新增关于、反馈等页面 2022-06-25 新增App登录功能 新增收录查询功能 修复bug若干 2022-07-03 新增文章分类 新增app、小程序端分享功能 修复小bug 2022-07-04 修复上传图片bug 小程序配置改为后台设置 2022-07-07 修复小程序端bug 小程序服务器域名配置 https://tp.hkiii.cn(必须,获取后台设置以及上传图片) https://api.tianapi.com(必须,调用百度查询) 您的博客域名(必须) 需要的接口 需要申请的api接口 百度收录量 搜狗收录量 需要注册的网站 Api后台管理 (用于管理您的程序) Dcloud (用于App打包) 七牛云对象储存(用于图片上传) 其他问题 以前购买过无授权版的用户直接联系我即可 购买插件版的用户需补差价 源码下载 github地址:https://github.com/pengsirs/emlog-uni gitee地址:https://gitee.com/pengsirs/emlog-wxmini
 2022-7-7
置顶文章
解决鼠标移入移出事件冒泡
解决鼠标移入移出事件冒泡
简介 今天总结下mouseenter、mouseleave、mouseover、mouseout的区别,之前一直懵着用没仔细研究他们的区别,结果终于踢到铁板了。 解决方法 mouseover和mouseout在父元素和其子元素都可以触发,当鼠标穿过一个元素时,触发次数得依子元素数量而言。 mouseenter和mouseleave只在父元素触发,当鼠标穿过一个元素时,只会触发一次。 mouseover和mouseout比mouseenter和mouseleave先触发
 2022-12-8
Vue实现搜索小功能
Vue实现搜索小功能
介绍 使用vue实现数据搜索功能,因为功能简单就不过多介绍了 搜索框 <input type="text" placeholder="请输入关键词" v-model="search"/> 数据 search:'', videoList:[ { name:'文件夹_1', id:1, file:[ { active: false, id: 1, name: " 测试视频", url:"hs/63902e5da667f.mp4", }, ] }, { active: false, id: 3, name: " 测试视频", url:"http2e5da667f.mp4", }, ], 使用计算属性 computed:{ searchList(){ if(this.search == ''){ return this.search }else{ return this.videoList.filter(item=>{ return item.name.includes(this.search) }) } } },
 2022-12-8
经常用到的小程序左右卡片
经常用到的小程序左右卡片
介绍 经常可以在很多小程序内看到左右两个小卡片,我自己也经常写到,记录一下,后面用到直接复制粘贴即可 演示 代码 <view class="two-box"> <view class="one"> <view class="content-left"> <view class="hdjh"> 活动计划 </view> <view class="hdjh-btn"> 点击进入 </view> </view> <view class="content-right"> <tui-icon name="member-fill" color="rgb(77, 137, 134)" size="35"></tui-icon> </view> </view> <view class="two"> <view class="content-left"> <view class="gzzd"> 活动计划 </view> <view class="gzzd-btn"> 点击进入 </view> </view> <view class="content-right"> <tui-icon name="order" color="rgb(65, 154, 253)" size="35"></tui-icon> </view> </view> </view> 注意上面有用到tui的图标,直接换成图片或别的图标即可,网页使用可直接将view替换成div .two-box{ width: 96%; display: flex; justify-content: space-between; margin: 10px 2%; } .one{ background-color: rgb(234, 248, 245); width: 40%; border-radius: 5px; display: flex; justify-content: space-around; padding: 15px; } .content-left .hdjh{ font-weight: 700; color: rgb(77, 137, 134); } .content-left .hdjh-btn{ font-size: 11px; display: initial; color: #fff; font-weight: 500; border-radius: 10px; padding: 1px 3px; background-color: rgb(77, 137, 134); } .two{ background-color: rgb(236, 242, 255); width: 40%; border-radius: 5px; display: flex; justify-content: space-around; padding: 15px; } .content-left .gzzd{ font-weight: 700; color: rgb(65, 154, 253); } .content-left .gzzd-btn{ font-size: 11px; display: initial; color: #fff; font-weight: 500; border-radius: 10px; padding: 1px 3px; background-color: rgb(65, 154, 253); }
 2022-12-2
vue父子组件通信
vue父子组件通信
Vue如何实现父子组件之间的通信功能 在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件。无论哪种组织方式父子组件的通信方式都是大同小异。 父传子 在父组件中,用 v-bind 动态绑定一个自定义属性,用于给子组件传递数据 <template> <div> <child :users="user"></child> </div> </template> <script> import { child } from "./child"; export default { components: { child }, data() { return { user: '张三' }; } }; </script> 在子组件中,使用 props 接收父组件传过来的数据。 <template> <div>{{ users }}</div> </template> <script> export default { props: ["users"] }; </script> 子传父 子组件通过事件的方式,利用 $emit 给父组件传值。 注意:$emit 的第一个参数是父组件自定义事件的方法名,后边的 “value” 是子组件要给父组件传递的数据 <template> <div> <button @click="datas"></button> </div> </template> <script> export default { methods: { datas() { this.$emit("info", value); } } }; </script> 在父组件中,绑定一个自定义事件,用来接收子组件传来的值; <template> <div> <child @info="getInfo"></child> </div> </template> <script> import { child } from "./child"; export default { components: { child }, methods: { getInfo(value) { // value 就是子组件传递过来的数据 } } }; </script> 原文:https://blog.csdn.net/weixin_47013351/article/details/124335003
 2022-11-23
Vue中实现对齐方式选择组件
Vue中实现对齐方式选择组件
效果 主要使用点击给当前元素添加class 创建一个Float组件 <template> <div class="float"> <div class="title">{{ title }}</div> <div class="right-input-wrap"> <div class="alignMode" v-for="(item,index) in 3" :key="index"> <span @click="checkAtv(index)" :class="[cIndex === index?'active':'','align'+(index+1)]"><em></em><em></em><em></em><em></em></span> </div> </div> </div> </template> js部分 <script> export default { name: "float", components: {}, props: { title: { type: String, default: "标题", }, value: { type: [String, Number], default: "", }, prop: { type: String, default: "", }, }, data() { return { cIndex: 1 }; }, computed: { }, watch: {}, methods: { checkAtv(index){ this.cIndex = index; console.log(index) if(index == 0){ this.$emit("update", "left", this.prop); }else if(index == 1){ this.$emit("update", "none", this.prop); }else if(index == 2){ this.$emit("update", "right", this.prop); } } }, created() {}, mounted() {}, beforeMount() {}, }; </script> 样式部分 <style lang="less" scoped> .alignMode span.active { background: #daebff; } .alignMode em:first-child,.alignMode em:nth-child(3) { width: 8px; } .alignMode em:nth-child(2), .alignMode em:nth-child(4) { width: 100%; } .alignMode em:first-child, .alignMode em:nth-child(3) { width: 8px; } .alignMode em:nth-child(2), .alignMode em:nth-child(4) { width: 100%; } .alignMode .align1 { text-align: left; } .alignMode .align2 { text-align: center; } .alignMode .align3 { text-align: right; } .alignMode em { display: inline-block; vertical-align: top; border-top: 1px solid #333; margin: 1px 0; } .alignMode span { display: inline-block; width: 13px; height: 13px; padding: 5px; border-radius: 50%; line-height: 0; margin: 0 2px; cursor: pointer; } .float { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; .left-text { font-size: 12px; color: #888; } .right-input-wrap { display: flex; flex: 1; justify-content: end; // padding-right: 10px; .radio { margin-right: 10px; .text { font-size: 12px; } } } } </style> 使用组件 引入组件(路径自己找) import FloatVue from "../../input2/Float.vue"; export default { name: "home", components: { FloatVue }, 使用 <FloatVue title="对齐方式" @update="propsStyle.float = $event" :value="propsStyle.float" ></FloatVue>
 2022-11-23
在Vue中this.$refs使用方法
在Vue中this.$refs使用方法
this.$refs 在vue中ref可以以属性的形式添加给标签或者组件 ref 写在标签上时:this.$refs.ipt 获取的是添加了ref="ipt"标签对应的dom元素 ref 写在组件上时:this.$refs['component'] 获取到的是添加了ref="component"属性的这个组件 <template> //给标签使用 <input type="text" ref="ipt"/> //给组件使用 <comp-detail ref="component"></comp-detail> <button @click="confirm">确定</button> </template> methods:{ confirm(){ console.log(this.$refs.ipt.value) //打印出输入框中的value值 this.$refs['component'].init() //调用组件comp-detail中的init()方法 } } 原文链接:https://blog.csdn.net/weixin_52208079/article/details/117949166
 2022-11-23
    下一页 尾页 跳转到第 页,共 14 页

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录