lc-web

支持打开外部web网址的组件

效果

使用方法

<template>
<div class="wxc-demo">
<title title="lc-web"></title>

<div class="container">

<category title="点击弹出外部web"></category>

<lc-button text="点击弹出外部web" type="normal" @LcButtonClicked="openWeb" style="margin-top:50px"></lc-button>
<lc-web
:show="show"
:height="1000"
title="Less教程"
:src="src"
@overlayClicked="overlayClicked"></lc-web>
</div>

</div>
</template>

<style scoped>
.wxc-demo {
background-color: #FFFFFF;
}
.container{
flex-direction: column;
align-items: center;
}
</style>

<script>
import LcWeb from 'lighting-ui/packages/lc-web';
import LcButton from 'lighting-ui/packages/lc-button';
import Category from 'lighting-ui/packages/_mods/category.vue';
import Title from 'lighting-ui/packages/_mods/title.vue';

export default {
components: { Title, Category, LcWeb,LcButton },
data: () => ({
show : false,
src : 'http://www.1024i.com/demo/less/'
}),
created () {
},
methods: {
openWeb(){
this.show = true;
},
overlayClicked(){
this.show = false;
}
}
};
</script>

可配置参数

Prop Type Required Default Description
show Boolean Y false 开启打开弹层
height Number N 800 弹层高度
title String N 提示 弹层头部文字
src String Y https://www.baidu.com 外部链接地址

事件回调

@overlayClicked="overlayClicked"  //点击遮罩层关闭事件