Vue子组件样式渗透

目录

Vue子组件样式渗透

微信公众号输入框拉起键盘撑起后不反弹

overflow: hidden scroll 在移动端失效

微信公众号详情页分享

Github又进不去了

---

Vue子组件样式渗透

Vue引用了第三方组件，如何在组件中局部修改第三方组件的样式？

PlanA : 去掉scoped

PlanB : 往更加外面的层中添加样式，如在最外面的App.vue里添加CSS样式

PlanC : 所有样式统一修改则放进全局样式里再在main.js中导入

PlanD : Vue的SFC(单文件组件规范)中，是允许多个style块:

<style>
    span{
	 // put your global style here
    }
</style>

<style scoped lang="scss">
    div {
	 // put your local style here
    }
</style>

PlanE:

只能通过 >>>，穿透scoped，(官方资料)

有些预处理器无法正确解析 >>> 

/deep/ 操作符( >>> 的别名)

/deep/ 组件 {

     样式

}

<style scoped>
    div >>> span { 
      /* .样式. */ 
    }
</style>

<style lang="scss" scoped >
　　.div{
　　　　background-color: #fff;
　　　　/deep/ span{
　　　　　　background-color: red;
　　　　}
　　}
</style>

<style lang="less" scoped>
      @deep: ~'>>>';
      .mydiv @{deep} span {
            color: red;
      }
</style>

通过 v-html 创建的 DOM 内容不受作用域内的样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式

如：富文本内容的样式修改

.vue单文件组件规范  传送门

---

微信公众号输入框拉起键盘撑起后不反弹

<input type="text" placeholder="请输入xxx" @blur="functionName()" v-model="xxx" />

 functionName() {
      document.body.scrollIntoView();
 },

                               @focus 获取焦点触发                                   @blur 失去焦点触发

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

---

overflow: hidden scroll 在移动端失效

overflow: scroll hidden;

只有这个在浏览器的开发者模式下并不影响,一旦真机立刻拉跨

加上

overflow-y: scroll;

一切正常

---

微信公众号详情页分享

在Vue项目中大多数人将微信分享的代码放在App.vue里到了其他页面分享依旧只能分享首页，

所以要分享详情页只能重新调用微信接口覆盖原来的

---

Github又进不去了

C:\Windows\System32\drivers\etc\hosts

# GitHub Start
192.30.253.112 github.com
192.30.253.119 gist.github.com
151.101.100.133 assets-cdn.github.com
151.101.100.133 raw.githubusercontent.com
151.101.100.133 gist.githubusercontent.com
151.101.100.133 cloud.githubusercontent.com
151.101.100.133 camo.githubusercontent.com
151.101.100.133 avatars0.githubusercontent.com
151.101.100.133 avatars1.githubusercontent.com
151.101.100.133 avatars2.githubusercontent.com
151.101.100.133 avatars3.githubusercontent.com
151.101.100.133 avatars4.githubusercontent.com
151.101.100.133 avatars5.githubusercontent.com
151.101.100.133 avatars6.githubusercontent.com
151.101.100.133 avatars7.githubusercontent.com
151.101.100.133 avatars8.githubusercontent.com
# GitHub End