zoukankan      html  css  js  c++  java
  • uniapp

    1.App.vue(样式层级高)定义样式就可以覆盖子组件或者父组件,无论有没有设置scoped关键字

    <script>
    	export default {
    		onLaunch: function() {
    			console.log('App Launch')
    		},
    		onShow: function() {
    			console.log('App Show')
    		},
    		onHide: function() {
    			console.log('App Hide')
    		}
    	}
    </script>
    
    <style>
    	/*每个页面公共css */
    	.title{
    		color: #333333 !important;
    	}
    </style>
    

      

    2.子组件设置scoped

    子组件设置scoped会增加私有后缀,为了保证它的唯一性不会父组件导入的css覆盖掉,但App.vue导入的css会覆盖掉它(特别注意)

    <template>
    	<view>
    		<view style="padding: 12px 15px;border-bottom: 1rpx solid #007AFF;" class="title">
    			点击hover效果
    		</view>
    		<!-- <button type="primary" @click="onSend">传值给onB组件</button> -->
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				msg: 'hello,onB'
    			};
    		},
    		methods: {
    		},
    		mounted() {
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.title {
    		color: #F0AD4E;
    	}
    </style>
    

      

    3.父组件如何穿透子组件,覆盖它的样式->穿透“>>>和/deep/

    index.vue

    <template>
    	<view class="content">
    		<onA></onA>
    	</view>
    </template>
    
    <script>
    	import onA from '@/components/onA.vue';
    	export default {
    		data() {
    			return {
    			}
    		},
    		components:{
    			onA
    		},
    		onLoad() {
    		},
    		mounted() {
    			
    		},
    		methods: {
    
    		}
    	}
    </script>
    
    <style>
    	>>>.title {
    		font-size: 36rpx;
    		color: #007AFF;
    	}
    	
    	/deep/.title{
    		font-size: 36rpx;
    		color: #f00;
    	}
    </style>
    

    onA.vue

    <template>
    	<view>
    		<view style="padding: 12px 15px;border-bottom: 1rpx solid #007AFF;" class="title">
    			点击hover效果
    		</view>
    		<!-- <button type="primary" @click="onSend">传值给onB组件</button> -->
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				msg: 'hello,onB'
    			};
    		},
    		methods: {
    		},
    		mounted() {
    		}
    	}
    </script>
    
    <style lang="scss">
    	.title {
    		color: #F0AD4E;
    	}
    </style>
    

     

      

  • 相关阅读:
    C++ 项目和资源导引
    C++ 类再探
    C++ 语句函数再探
    leetcode-174. Dungeon Game 地下城游戏
    34. Find First and Last Position of Element in Sorted Array + 二分
    leetcode-27. Remove Element删除元素
    git 使用入门
    MySQL数据库的启动与停止
    C++类型转换
    C++ 获取对象类型
  • 原文地址:https://www.cnblogs.com/cisum/p/12196511.html
Copyright © 2011-2022 走看看