<template>
	<ciy-header title="ciy-svgimg组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">图片svg组件</view>
			<view class="content">
				根据src判断是svg，还是图片资源。<br/>
				图片默认widthFix模式，可远程加载svg资源。<br/>
				受到微信小程序限制，style不能直接作用到组件上，使用时需外面包裹一层view。<br/>
			</view>
		</view>
		<view class="ciy-caption">src指向相对链接/img/face.png</view>
		<view style="text-align: center;margin:1em auto;">
			<view style="display:inline-block;width:6em;">
				<ciy-svgimg :src="'/img/face.png'"></ciy-svgimg>
			</view>
		</view>
		<view class="txt-center py4">
			<ciy-svgimg ciystyle="width:6em;" :src="'/img/face.png'"></ciy-svgimg>
		</view>
		<view class="ciy-caption">src指向绝对链接https://xx.cn/xx.png</view>
		<view class="txt-center">
			<ciy-svgimg ciystyle="width:100%;" src="https://n.sinaimg.cn/mail/sysmail/mailcommon/fplus-2022-slider/smsbanner-main.png"></ciy-svgimg>
		</view>
		<view class="ciy-caption">src指向svg源码</view>
		<view class="txt-center py4">
			<ciy-svgimg ciystyle="width:3em;height:3em;" :src="ciysvg"></ciy-svgimg>
		</view>
		<view class="ciy-caption">src指向svg链接</view>
		<view class="txt-center py4">
			<ciy-svgimg ciystyle="width:3em;height:3em;" src="/img/demo.svg"></ciy-svgimg>
		</view>
		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
					<view class="prp">src</view>
					<view class="tip">
						图片资源<br/>
						＜svg开头识别为svg资源。<br/>
						http开头识别为绝对图片链接。<br/>
						其他用file_stor转为图床资源。<br/>
					</view>
					<view class="hr"></view>
					<view class="prp">ciystyle</view>
					<view class="tip">
						针对微信小程序等问题，传递style。
					</view>
					<view class="hr"></view>
					<view class="prp">mode</view>
					<view class="tip">
						图片资源的显示模式<br/>
					</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				无
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				无
			</view>
		</view>
		<view class="hr"></view>
	</view>
</template>

<style>
	@import '@/pages/demo/zdemo.css';
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		data() {
			return {
				ciysvg: '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M987.136 384.512C919.552 131.584 668.16-22.528 415.232 27.136c219.648-41.984 434.176 79.36 488.96 283.136 57.344 214.016-82.944 437.76-313.344 499.2-49.664 13.312-78.848 64-65.536 113.152 13.312 49.664 64 78.848 113.152 65.536 263.168-70.144 418.816-340.48 348.672-603.648zM116.224 713.216C58.88 499.2 199.68 275.456 430.08 214.016c49.664-13.312 78.848-64 65.536-113.152C482.816 51.2 432.128 21.504 382.464 34.816c-263.68 70.656-419.84 340.992-349.184 604.16 67.584 252.928 319.488 407.04 571.392 356.864-219.648 42.496-433.664-78.848-488.448-282.624z m93.184-203.776L291.84 449.536c44.544-32.256 90.112-32.256 133.12-0.512l83.456 60.928-149.504-230.4-149.504 229.888z m516.096-60.416L808.96 509.952l-149.504-229.888-149.504 229.376 82.432-59.904c44.544-32.256 90.112-32.256 133.12-0.512z m-366.08 291.84L441.856 680.96c44.544-32.256 90.112-32.256 133.12-0.512l83.456 60.928-149.504-230.4-149.504 229.888z" fill="#56a4ef"></path></svg>'
			}
		},
		onLoad() {},
		methods: {}
	}
</script>