mpvue中使用iview-weapp中的i-drawer和i-icon

一、

源码中的i-drawer隐藏区域的内容是位于中间的，发现无论是怎样修改样式都无法改变内容的位置，我们希望内容出现在顶部，那么需要修改iview中drawer源码中的后缀名为wxss的文件，源码修改如下：

.i-drawer-left .i-drawer-container {
	left: 0;
	top: 12%;
	/* top: 50%; */
	transform: translate3d(-100%, -50%, 0)
}

源码的样式优先级最高，只能改，后需要如果在需要引入组件也是这个top值。下面为组件调用的完整过程：

<view>
    <view class="top" style="width: 100%;">
	    <view style="display: flex;vertical-align: middle;">
	        <img src="../../../static/images/lefttwo.png" style="width: 30px;height: 30px;" @click="toggleLeft1" v-show="!showLeft1" />			
        </view>				
    </view>
    <view>
        <i-drawer :mask-closable="true" :visible="showLeft1" @close="toggleLeft1">
            关注前端尔嵘，我还会卖百货额，淘宝请搜索：华诚荣邦百货,放心肯定会给你优惠多多的
        </i-drawer>
    </view>
</view>

<script>

    export default {
        data() {
			return {
                showLeft1: false, //抽屉默认关闭
            }
        },
        methods: {
            toggleLeft1() {
				this.showLeft1 = !this.showLeft1;
			},
        }
    
    }
</script>

i-icon默认是带字体大小的，且默认字体大小是14px,需要修改i-icon可以修改对应源码的js文件,

Component({
    externalClasses: ['i-class'],

    properties: {
        type: {
            type: String,
            value: ''
        },
        custom: {
            type: String,
            value: ''
        },
        size: {
            type: Number,
            value: "30" //默认是14，修改后
        },
        color: {
            type: String,
            value: ''
        }
    }
});