mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-09-20 03:36:05 +08:00
51 lines
1.0 KiB
TypeScript
51 lines
1.0 KiB
TypeScript
/**
|
||
*
|
||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||
*
|
||
* @date 2023-06-09
|
||
*
|
||
* @workspace ray-template
|
||
*
|
||
* @remark 今天也是元气满满撸代码的一天
|
||
*/
|
||
|
||
/**
|
||
*
|
||
* RayIframe 组件使用示例
|
||
*
|
||
* 具体使用参考 props 代码注释
|
||
* 做了简单的一个组件封装, 希望有用
|
||
*/
|
||
|
||
import { NCard, NSpace } from 'naive-ui'
|
||
import RayIframe from '@/components/RayIframe/index'
|
||
|
||
const IframeDemo = defineComponent({
|
||
name: 'IframeDemo',
|
||
setup() {
|
||
return {}
|
||
},
|
||
render() {
|
||
return (
|
||
<NSpace vertical size={[20, 20]}>
|
||
<NCard title="naive ui（延迟加载）">
|
||
<RayIframe
|
||
src="https://www.naiveui.com/zh-CN/dark"
|
||
height="300"
|
||
allow="fullscreen"
|
||
/>
|
||
</NCard>
|
||
<NCard title="vueuse（立即加载）">
|
||
<RayIframe
|
||
src="https://www.vueusejs.com/"
|
||
height="300"
|
||
lazy={false}
|
||
/>
|
||
</NCard>
|
||
</NSpace>
|
||
)
|
||
},
|
||
})
|
||
|
||
export default IframeDemo
|