Honeycomb Design

# 内嵌框架 Iframe

在当前页面嵌套另外一个HTML页面，用于页面组合。

# 基础使用

属性调整 重新加载
基础使用

在当前页面嵌套另外一个HTML页面，用于页面组合。

<title>基础使用</title>
<describe>在当前页面嵌套另外一个HTML页面，用于页面组合。</describe>
<template>
    <hc-iframe
        ref="iframe"
        :src="src"
        :width="comWidth"
        :height="comHeight"
      ></hc-iframe>
    <hc-form :model="formData" label-width="95px">
        <hc-form-groups>
            <hc-form-group>
            <hc-form-row>
                <hc-form-cell prop="width" label="页面宽度">
                <hc-textbox v-model="formData.width"/>
                </hc-form-cell>
                <hc-form-cell prop="height" label="页面高度">
                <hc-textbox v-model="formData.height"/>
                </hc-form-cell>
                <hc-form-cell prop="src" label="页面地址">
                <hc-textbox v-model="formData.src"/>
                </hc-form-cell>
            </hc-form-row>
            </hc-form-group>
        </hc-form-groups>
        </hc-form>
          <hc-button style="margin-left: 20px" type="primary" @click="modify"
        >属性调整</hc-button
      >
      <hc-button style="margin-left: 20px" type="primary" @click="reload"
        >重新加载</hc-button
      >
</template>
<script>
export default {
    data: function () {
        return {
            src: '/',
            width:500,
            comWidth:'100%',
            height:500,
            comHeight:500,
            formData:{
                width:'100%',
                height:500,
                src:'/',
            }
        }
    },
    methods: {
        modify: function () {
            this.comWidth = this.formData.width
            this.comHeight = this.formData.height
            this.src = this.formData.src
        },
        reload: function () {
            this.$refs.iframe.reload()
        }
    },
    created(){
    }
}
</script>

# 属性及事件

# HcIframe属性

属性 说明 类型 可选值 默认值
src 嵌套页面地址 string -- --
width 页面宽度 string / number -- 300
height 页面高度 string / number -- 150
display-nav 控制导航显示/隐藏 boolean -- false

# HcIframe事件

名称 说明 参数
reload 重新加载页面 --

← 工具栏 Toolbar →